为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消耗情况
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
