快捷指令速查表

标题
快速打开Dev Tools Ctrl + Shift + i
打开命令菜单 Ctrl + Shift + P
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i
快速打开Dev Tools Ctrl + Shift + i

修改Dev Tools的主题

  • 修改为dark主题

dark theme

图解前端调试工具Chrome Dev Tools的使用_vue.js

  • 修改为白色主题
    light theme

图解前端调试工具Chrome Dev Tools的使用_当前页_02

截屏

screenshot

图解前端调试工具Chrome Dev Tools的使用_前端_03

改变调试窗口的位置

  1. dock to right
  2. dock to left
  3. dock to bottom

常用Tab介绍

1. Element

  • 查看页面在移动端布局的样子,可以点击下面的按钮

图解前端调试工具Chrome Dev Tools的使用_vue.js_04

  • 给目标元素添加样式

首先选中元素,然后在下面添加样式

图解前端调试工具Chrome Dev Tools的使用_前端_05

  • 让hover永驻

选中目标元素然后点击下面的内容

图解前端调试工具Chrome Dev Tools的使用_前端_06

  • 只修改列表项中的某一个

选中目标元素点击cls

图解前端调试工具Chrome Dev Tools的使用_vue.js_07

  • 复制样式并粘贴样式

选中目标样式,然后点击copy styles

图解前端调试工具Chrome Dev Tools的使用_vue.js_08

选中需要粘贴样式的位置,然后粘贴到下面的位置

图解前端调试工具Chrome Dev Tools的使用_vue.js_09

Computed

这个tab栏主要记载了当前页面都应用了哪些样式,通过点击可以跳转到这些样式。

  • Show all与Group

图解前端调试工具Chrome Dev Tools的使用_vue.js_10

Layout

在Layout标签下可以调试Grid布局和Flex布局。

图解前端调试工具Chrome Dev Tools的使用_chrome_11

勾选flex元素可以给flex元素加上横线边框。

图解前端调试工具Chrome Dev Tools的使用_chrome_12

可以通过styles面板中的点击图标来测试flex的其他属性。

图解前端调试工具Chrome Dev Tools的使用_前端_13

Event Listeners

该面板可以查看当前页面所有的监听事件。

图解前端调试工具Chrome Dev Tools的使用_chrome_14