为Google浏览器的开发人员工具叫好

为Google浏览器的开发人员工具叫好

工欲善其事必先利其器，浏览器F12开发人员工具就是威力无比的神器。下面就分别从页面视觉调试、JS调试、网络调试三个方面简单介绍开发人员工具的使用。

页面视觉调试

l        点击键盘上“F12”按键进入调试工具

l        Elements：查看并编辑HTML（双击或是右键选择，拖动重排）

l        Styles:查看并修改内联style属性或者css属性（双击）

l        Computed:查看盒子模型，并可以修改（双击）

l        Sources:查看并编辑css文件，第一次修改需要“另存为”；还有一点激动人心的是它可以用底部的{}符合对文档进行格式化整理

JS调试

l        点击Console面板，在文档中点击行号添加断点，刷新页面进入调试，依次下一步

l        输出JS变量的值alert("result="+"result");更简单的直接看Watch,Scope,Breakpoints等

l        Elements中右键选择“break on”可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处

l        作为JS_API手册使用，其实输入任何信息都会智能提示，如console;

l        使用并测试方法

var d=new Date()

console.dir(d);

还可以直接输入变量，就会显示变量的值

网络调试

l        Network面板是form请求调试的地盘，同时还擅长调试Ajax类请求，注意是打开这个面板之后发起的请求

l        点击传输列表中某一项文件，在右侧Headers中的Query String Parameters传递的参数和值是多么一目了然呀！

l        若文件为非提交数据文件，那么右侧的Preview选项卡把源文件显示的一览无余，把小伙伴们惊呆了

OTHERS

l        Sources可以查看源代码，css，js，img等。且css可以直接编辑

l        Resources可以看到的内容就比较多了，WebSQL，IndexedDB，Session，Cookies，Cache等

l        Audits做前端优化，加速网页加载速度

l        Profiles查看内存占用时间和CPU消耗情况