Chrome浏览器调试

用Chrome浏览器自带的开发者工具进行调试。

1.F12打开开发者工具

---

2.菜单栏简要介绍：

菜单栏

（1）元素选择器
（2）PC端/移动端模式切换
（3）Elements——元素。页面上所有HTML节点
（4）Sources——页面引入的web资源，包括图片img、样式css、脚本js
（5）Console——控制台（js调试器）
（6）Network——网络。当前页面加载了哪些资源
（7）Timeline——时间线。页面加载每项资源消耗的时间。（一般用来优化网页，缩短页面响应时长）
（8）Profiles
（9）Application——应用。（存放调试时所需的数据存储）包括Local Storage、Session Storage、Indexed DB、Web SQL、Cookies
（10）Security——安全性
（11）Audits

3.切换到移动端模式。

可以查看网页在各种主流移动设备上的显示效果。也可以手动设置屏幕尺寸。

移动端模式

这个功能的特点是模拟设备、模拟触摸和模拟网络状况。

各种模拟设备型号供选择

各种模拟网络状况供选择

4.审查元素

对页面中某一元素，单击右键弹出菜单中的审查元素选项，会自动打开调试工具，定位到Elements中该元素HTML的位置。

单击右键菜单中的审查元素选项

定位到该元素相关HTML。鼠标悬浮显示元素的标签类型、类名、尺寸信息

右键删除该元素

5.编辑元素

（1）右键单击Edit as HTML

Edit as HTML

（2）元素样式编辑。编辑后可以直接在浏览器中预览，不会在本地保存。

styles编辑

计算后样式

元素事件监听

6.js调试

（1）在js代码中打断点调试。

断点调试

（2）查看对象属性和方法。
（JavaScript 中的所有事物都是对象:字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。自定义对象是带有属性和方法的特殊数据类型。）

查看对象属性和方法

（3）查看Scope——作用域

Scope

（4）草稿纸

草稿纸

（5）Network

Headers里面一般关心的是请求方式和状态码以及看请求字符串参数传的对不对。

Headers

Preview（预览，json格式）

Preview

7.更多内容链接

（1）利用Console来调试JS程序、Console用法总结（1）
（2）利用console.table()做高级JS调试、Console用法总结（2）
（3）15个必须知道的chrome开发者技巧 ： 中文译文 / 英文原文