Chrome代码调试指南

打开开发者工具

1. 在Chrome菜单选择：更多工具->开发者工具

2. 在页面原色上右键单击，选择检查

3. 快捷键

   • 打开最近关闭状态

     cmd+opt+i或ctrl+shift+i

   • 快速查看DOM或样式

     Command+Option+c或Control+shift+c

   • 快速进入Console查看log运行JavaScript

     Command+Option+j或Control+shift+j

   • F12打开

使用Elements调试DOM

查看与选择DOM节点

1. 将鼠标移动到需要被查看的元素
2. 右键选择检查

通过开发者工具左上角的小箭头可以选择需要查看的元素

通过如上图所示按钮，也可以定义调试工具所处位置。

实时编辑HTML和DOM节点

在调试工具处，双击dom节点即可进入编辑。

也可以通过右键节点选择编辑HTML模式。

在Console中访问节点

1. 通过document.querySelectAll访问

   

2. 通过$0快速访问选中元素

   

3. 拷贝->js path

   

   复制出的路径是通过querySelector接口选择的元素

给DOM中断点调试

1. 在属性修改时打断点
2. 节点删除时打断点
3. 子树修改时打断点

通过对需要调试元素右键选择break on即可选择调试方式。

调试样式及CSS

查看与编辑css

在调试工具右侧即可看到样式

通过filter也可以过滤（搜索）某个属性

点击空白处也可以新增属性；点击前边的勾也可以使此属性失效。

在元素中增加类与伪类

1. 通过点击hov按钮，可以选择伪类。例如点击:hover表示模拟鼠标悬停。

   

2. 点击cls按钮，可以为元素添加一个类

   

3. 点击加号，表示可以新建一个类

   

快速调试CSS数值及颜色图形动画

当鼠标悬停到...图标时可以看到如下

点击即可展开可视化界面。

通过选择more tools -> Animations即可调出动画窗口。

当触发动画时就会自动录制，并且可以通过下方的属性可视化调试。

使用Console调试Javascript

Console交互式命令

在Console处可以写任意JavaScript代码。

在Console中调试log消息

1. 普通信息

   console.log('普通信息')
   

   

2. warn告警信息

   console.warn('告警信息')
   

   

3. 错误信息

   console.error('错误信息')
   

   

4. 展示json格式的复杂信息

   var t = [
       {name:'666',age:'17',sex:'男'},
       {name:'666',age:'17',sex:'男'},
       {name:'666',age:'17',sex:'男'}
   ]
   console.table(t)
   

   

5. 信息组展示

   var label = '一组信息'
   console.group(label)
   console.info('Log')
   console.info('warn')
   console.info('error')
   console.groupEnd(label)
   

   

6. 定制样式

   var styles = 'color:red;background:black;font-size:20px;'
   console.log("%c样式展示",styles)
   

   

7. 网络请求错误展示

   当请求资源不存在或其他信息时打印的日志。

   

8. 断言

   console.assert(false,'断言失败')
   

   

9. 查看代码执行时间

   console.time()
   var l = 1
   console.timeEnd()
   

   

10. 清除打印日志

    console.clear()
    

调试JavaScript的基本流程

1. 在代码中写入debugger

2. 断点调试

   

可以通过图中表示的几个按钮进行调试。按钮从左向右依次表示

• 恢复代码执行

• 跳过下一个函数执行

• 进入下一个函数执行

• 跳出函数

• 单步执行

也可以通过下方事件进行监听。

Sources面板

1. 调出面板

   

   左侧为全局的静态资源，选择一个文件也可以对源文件进行编辑。

2. 按住ctrl+p可以全局搜索某个资源

   

3. 按住ctrl+shift+p可以输入一些命令

   

使用Snippets来复制Debugging

简单来说就是为当前页面新加一个代码片段。

1. 打开Snippets面板

   

2. 编写需要添加的代码片段

   

3. 执行代码片段

   

4. 即可看到console里边输出了test

   

使用DevTools作为Text IDE

1. 通过Sources->Filesystem唤起面板

   

2. 添加文件夹

   添加文件夹需要允许浏览器获取权限

   

3. 注意

   在此修改的内容等同于直接修改文件。

调试网络

Network面板

使用Network详细分析请求

1. filter

   过滤只能过滤出下方已经展示的请求包含的地址。而无法过滤内容。

2. 搜索

   可以搜索到返回数据内容

3. Preserver log

   可以在跳转时保留网络请求日志

4. Disable cache

   不使用缓存

使用Network Waterfall分析页面载入性能

客户端存储Application面板

查看与调试Cookie

通过上方的filter可以进行过滤，同样的也可以删除或新增Cookie。

查看LocalStorage与SessionStorage

与Cookie类似。

移动端H5页面调试

模拟移动端设备

使用Chrome DevTools进行H5页面开发

1. 通过使用show sensors命令呼出Sensors面板进行调试

   

   在Edge中为传感器。

   

   

2. 网络菜单

   

   

   在chrome为network

   

在Chrome DevTools中集成React和Vue插件

集成React插件

由于国内无法使用Google商店，因此建议使用Edge商店。

安装此插件后，如果网页是由react开发的，那么开发者工具会多出一个react的选项，并且插件图标是点亮的。

集成VUE插件

与React插件类似。