打开开发者工具

  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. 右键选择检查

image-20200819101826232

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

image-20200819101911149

image-20200819101926899

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

实时编辑HTML和DOM节点

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

d5469863-68f6-4bab-97db-e677decb7226

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

image-20200819102413228

在Console中访问节点

  1. 通过document.querySelectAll访问

    image-20200819102648246

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

    acc2bde7-d65d-4a52-934e-0ffeae65ad63

  3. 拷贝->js path

    image-20200819102911893

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

给DOM中断点调试

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

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

image-20200819103225069

调试样式及CSS

查看与编辑css

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

image-20200819104003961

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

image-20200819104035524

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

a3627d23-7c37-449d-b49d-5ac72830c7e9

在元素中增加类与伪类

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

    image-20200819104612846

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

    image-20200819104707614

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

    image-20200819104730926

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

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

image-20200819105332830

image-20200819105353894

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

image-20200819105602864

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

image-20200819105904622

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

使用Console调试Javascript

Console交互式命令

image-20200819110537426

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

在Console中调试log消息

  1. 普通信息

    1
    console.log('普通信息')

    image-20200819112243040

  2. warn告警信息

    1
    console.warn('告警信息')

    image-20200819112252191

  3. 错误信息

    1
    console.error('错误信息')

    image-20200819112300854

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

    1
    2
    3
    4
    5
    6
    var t = [
        {name:'666',age:'17',sex:'男'},
        {name:'666',age:'17',sex:'男'},
        {name:'666',age:'17',sex:'男'}
    ]
    console.table(t)

    image-20200819112314090

  5. 信息组展示

    1
    2
    3
    4
    5
    6
    var label = '一组信息'
    console.group(label)
    console.info('Log')
    console.info('warn')
    console.info('error')
    console.groupEnd(label)

    image-20200819112326629

  6. 定制样式

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

    image-20200819112336966

  7. 网络请求错误展示

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

    image-20200819112435350

  8. 断言

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

    image-20200819112446959

  9. 查看代码执行时间

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

    image-20200819112455085

  10. 清除打印日志

    1
    console.clear()

调试JavaScript的基本流程

  1. 在代码中写入debugger

  2. 断点调试

    image-20200819124436110

image-20200819124512724

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

  • 恢复代码执行

  • 跳过下一个函数执行

  • 进入下一个函数执行

  • 跳出函数

  • 单步执行

image-20200819124950781

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

Sources面板

  1. 调出面板

    image-20200819144101488

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

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

    image-20200819144144830

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

    image-20200819144249607

使用Snippets来复制Debugging

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

  1. 打开Snippets面板

    image-20200819144839591

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

    image-20200819144916847

  3. 执行代码片段

    image-20200819144935685

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

    image-20200819144959422

使用DevTools作为Text IDE

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

    image-20200819145733957

  2. 添加文件夹

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

    image-20200819145848143

  3. 注意

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

调试网络

Network面板

image-20200819150253455

使用Network详细分析请求

image-20200819151457490

  1. filter

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

  2. 搜索

    可以搜索到返回数据内容

  3. Preserver log

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

  4. Disable cache

    不使用缓存

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

image-20200819152817560

image-20200819152831145

客户端存储Application面板

查看与调试Cookie

image-20200819153112232

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

查看LocalStorage与SessionStorage

image-20200819153556477

与Cookie类似。

移动端H5页面调试

模拟移动端设备

image-20200819153727727

使用Chrome DevTools进行H5页面开发

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

    image-20200819154334119

    在Edge中为传感器。

    image-20200819154442591

    image-20200819154524467

  2. 网络菜单

    image-20200819154604472

    image-20200819154611722

    在chrome为network

    image-20200819154707177

在Chrome DevTools中集成React和Vue插件

集成React插件

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

image-20200819154825420

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

image-20200819155208648

image-20200819155218066

集成VUE插件

与React插件类似。