大前端

主题

Chrome Dev Tools使用 ​

主要内容:

  1. 各个面板功能介绍
  2. css debug 和 js debug
  3. 一些技巧 .....

打开 ​

1. 打开 dev Tools ​

方式1: 菜单->更多工具->开发者工具 image.png

方式2: 快捷键 F12

2. 打开命令菜单 ​

首先得打开Dev Tools

  • windows系统: ctrl + shift + p
  • mac: command + shift + p

3. dev Tools主题切换 ​

切换深色主题: 输入dark theme 切换浅色主题: 输入 light themeimage.pngimage.png

4. 截屏 ​

在命令菜单输入框中输入screenshot,有四个选项,如下图 image.png

5. dev tools停靠位置 ​

在命令菜单中输入dockimage.png

6. dev Tools切换语言 ​

点击devTools右上角的设置齿轮图标, 得到下图 image.png

选中中文后, 得到中文的dev Tools

image.png

特别注意: 切换成中文后, 输入命令就不能用英文了, 应该换成中文, 比如, screenshot -> 截屏

dev Tools各个Tab介绍 ​

image.png