Chrome DevTools完全使用攻略

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
      Chrome DevTools完全使用攻略_第1张图片
  • 快捷截屏

    • 在命令菜单中输入screenshot

      Chrome DevTools完全使用攻略_第2张图片

  • 移动窗口位置

    • 在命令菜单中输入Dock

      Chrome DevTools完全使用攻略_第3张图片

3.Elements Tab栏

Chrome DevTools完全使用攻略_第4张图片

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添加样式

    Chrome DevTools完全使用攻略_第5张图片

  • 让状态常驻

    • 例如:让:hover样式常驻

      Chrome DevTools完全使用攻略_第6张图片

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

      Chrome DevTools完全使用攻略_第7张图片

    • 复制样式

      Chrome DevTools完全使用攻略_第8张图片

    • 样式说明
      Chrome DevTools完全使用攻略_第9张图片

      Chrome DevTools完全使用攻略_第10张图片

      样式说明3

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

Chrome DevTools完全使用攻略_第11张图片

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

Chrome DevTools完全使用攻略_第12张图片

  • flex布局

    Chrome DevTools完全使用攻略_第13张图片
    Chrome DevTools完全使用攻略_第14张图片

  • grid布局

    Chrome DevTools完全使用攻略_第15张图片

  • 类似flex在Styles中也有一些图形化的属性可以点击设置,这里就不列举了
3-2-3 Event Listeners面板
这个面板会列出来在页面中所有绑定的事件

Chrome DevTools完全使用攻略_第16张图片

3-2-4 DOM Breakpoints面板
这个面板稍后在js部分中介绍
3-2-5 Properties 面板
这个面板会显示出所选dom节点的属性

Chrome DevTools完全使用攻略_第17张图片

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

4.Console Tab栏

4-1 语句执行以及$_

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

Chrome DevTools完全使用攻略_第18张图片

4-2 $0、$1...

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

Chrome DevTools完全使用攻略_第19张图片

Chrome DevTools完全使用攻略_第20张图片

4-3 console的一些方法

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

Chrome DevTools完全使用攻略_第21张图片
Chrome DevTools完全使用攻略_第22张图片

4-4 Log级别筛选

Chrome DevTools完全使用攻略_第23张图片

4-5 变量跟踪

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

Chrome DevTools完全使用攻略_第24张图片

5.Sources Tab栏

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

Chrome DevTools完全使用攻略_第25张图片

添加后会是这种效果

Chrome DevTools完全使用攻略_第26张图片

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

5-2. 在SourcesTab中点击行号

Chrome DevTools完全使用攻略_第27张图片

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

Chrome DevTools完全使用攻略_第28张图片

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

Chrome DevTools完全使用攻略_第29张图片

6. Network Tab栏

6-1. 面板说明

Chrome DevTools完全使用攻略_第30张图片

6-2. 新增网速显示

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

Chrome DevTools完全使用攻略_第31张图片

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

Chrome DevTools完全使用攻略_第32张图片

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

导入导出请求文件

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

你可能感兴趣的:(Chrome DevTools完全使用攻略)