页面制作——开发、调试工具

1.开发工具

文本编辑器 Sublime Text

优点:跨平台,启动快;多行选择(操作方便);各种实用插件;Snippets(代码片段);支持VIM(文本编辑器,代码补完,编辑及错误跳转等方便编程功能丰富)兼容模式

常用插件

Package Control 管理工具,可添加、更新、卸载相应插件。

Emmet 快速编写HTML和CSS代码

DocBlockr 方便产生函数注释

SideBarEnhancement 右键菜单增强工具

Terminal 可以在Sublime中直接打开命令行终端


2.调试工具

每个浏览器都自带调试工具,以Chrome为例介绍调试工具

Emmet:用来调试HTML和CSS

Network:可看网站所有的网络请求,和后端调一些接口的时候也会用到这个面板

Sources:可以看到网站所有的资源,在JavaScript文件中可以设置断点调试

Console:类似一个命令行工具,可以直接写JavaScript代码执行,另外在JavaScript文件中也经常输出一些内容方便调试,经常和Sources面板结合起来调试JavaScript

Resources(Application):网站的本地数据资源,cookies,storage等

Timeline,Profile(Memory),Audits:主要用来调试页面的性能

IE浏览器

IE早期的版本不会自动更新

IE8+ 版本自带调试工具,可调式IE7-电脑安装版本

IE6 IETester查看IE6效果,安装IE Develop Toolbar 进行调试

F12 打开调试器,DOM资源管理器(Elements),样式(Styles修改CSS)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在做前端开发时,我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码,俗话说预先善其事必先利其器,这...
    Rella7阅读 24,034评论 0 15
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,515评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,352评论 1 34
  • ◆ 南瓜夹心饼干 食材: 糯米粉220克,南瓜200克,饼干适量,白糖40克,白芝麻适量 做法: 1.南瓜去皮,切...
    味博士阅读 383评论 2 2
  • 好好的有朋友和我抱怨,某某总是找她吃饭,然后让她买单。 某某我也认识,就叫她小气姑娘吧,这位姑娘一贯喜欢占便宜,基...
    狩望轮回阅读 446评论 3 3