你所不知道的Chrome DevTools(冷门但好用的功能)

Chrome Dev Tools使用说明

1.打开Dev Tools

  • 菜单>更多工具>开发者工具

  • 快捷键

    • F12
    • option+command+i(mac) 打开会选中Elements
    • option+command+j(mac) 打开会选中Console

2.命令菜单

  • 打开快捷键

    • ctrl+shift+p
    • command+shift+p(mac)
  • 修改Dev Tools主题颜色

    • command+shift+p

    • 输入theme

  • 快捷截屏

    • 在命令菜单中输入screenshot

      image-20220220165642462
  • 移动窗口位置

    • 在命令菜单中输入Dock

      image-20220220170556856

3.Elements Tab栏

image-20220220200732098

3-1 DOM部分

  • 检查Dom元素可以在Dom元素上右键,然后选择检查

  • 查询Dom

    • 快捷键

      • ctrl+f
      • command+f(mac)
    • 查询方式

      • 文本查询

        直接输入标签名或者类名 :divanony-nav

      • css选择器

        输入css选择器:.container#list

      • Xpath

        输入xpath表达式://div/ul

      • Inspect(element) --- console函数

        在console中输入此函数:inspect(document.body)

3-2 样式部分

3-2-1 Styles面板

style面板就是当前样式表的样式

  • element.style添加样式

    image-20220220202608607
  • 让状态常驻

    • 例如:让:hover样式常驻

      image-20220220202808671
    • 添加或移除某一个class类名

      image-20220220203932720
    • 复制样式

      image-20220220204133435
    • 样式说明

      image-20220220203304644 image-20220220203459662 image-20220220203121651
3-2-2 Computed面板

这个面板会列出来当前所有的使用样式,不会像Styles一样,按照元素、类名分开

image-20220320094453341
3-2-3 Layout面板

这个面板会列出来页面中所有的flex布局和grid布局

image-20220320095334868
  • flex布局

    image-20220320100046264 image-20220320100202737
  • grid布局

    image-20220320100635701

类似flex在Styles中也有一些图形化的属性可以点击设置,这里就不列举了

3-2-3 Event Listeners面板

这个面板会列出来在页面中所有绑定的事件

image-20220320101221292
3-2-4 DOM Breakpoints面板

显示所有断点,这个面板稍后在js部分中有说明

3-2-5 Properties 面板

这个面板会显示出所选dom节点的属性

image-20220320101859258
3-2-6 Accessibility面板

这个面板可以用来帮助我们构建无障碍的页面。这里就不介绍了

4.Console Tab栏

4-1 语句执行以及$_

$_可以返回上一条语句的执行结果

image-20220320102925674

4-2 $0、$1...

在控制台可以通过$0来返回上一个选中的dom元素,同理,1会返回上上一个,1会返回上上一个,2会....,当在Elements中选中节点时,也会有提示

image-20220320103347081 image-20220320103428615

4-3 console的一些方法

console的一些方法,例如:log、error、warn、table、group、time、trace、clear

image-20220320104501850 image-20220320111022013

4-4 Log级别筛选

image-20220320142914990

4-5 变量跟踪

点击这个小眼睛,可以加变量,之后在控制台修改变了,上面的值也会实时更新

image-20220320143145289

5.Sources Tab栏

如果使用在vue、react框架,断点调试的时候会跳转到框架的代码中去,只要在Call Stack中把框架设置成不检索就行

image-20220320145928803

添加后会是这种效果

image-20220320150031650

5-1. 在js代码中写debugger触发调试

5-2. 在SourcesTab中点击行号

image-20220320144519421

5-3. dom节点变化触发断点(暂停执行)image-20220320144906295

5-4. 通过Event Listener 触发断点

image-20220320145446503

6. Network Tab栏

6-1. 面板说明

image-20220320151013957

6-2. 新增网速限制

chrome 自带了Fast 3G;Slow 3G,也可以自己新增网速的限制

image-20220320151522165

6-3. 网络更多设置(ua、传输方式)

image-20220320151910674

6-4. 导入和导出请求文件

image-20220320152059235

点击会到处一个json文件,里面包含了所有的请求信息,假设当客户那边请求出现问题,而开发环境无法复现时,可以让客户到处har文件,之后再在开发环境导入har文件,查看问题。

分类:
开发工具
标签: