谷歌浏览器开发者工具操作手册

谷歌浏览器开发者工具操作手册

一、准备工作

谷歌浏览器是开发人员使用最多的，作为前端开发来说：掌握谷歌浏览器的开发者工具调试的各种功能可以更快的定位到问题，更好与后端做交互。

开发者工具日常经常用到的几个选项卡功能：元素（Elements）、控制台（Console）、源代码（Sources）、网络（NetWork）。这几个可以在下面重点关注一下。

1.1 开发者工具打开的几种方式

• 在浏览器界面按F12,如果F12键被占用则使用组合键Fn + F12;
• 使用快捷键Ctrl + Shift + i;
• 点击鼠标右键选择右键菜单中的检查；
• 点击浏览器右上角┇——>更多工具——>开发者工具

1.2 将开发者工具设置为中文

前提条件谷歌浏览器版本是94+版本，要不然不支持中文。

操作步骤：

1. 根据上面方法打开浏览器开发者工具；
2. 使用快捷键F1,不生效则被占用换组合键Fn + F1；或者点击开发工具右上角设置图标,目的是进入开发者工具设置页面；
3. 在Language下拉框最下面找到Chinese-中文；
4. 重启浏览器，或者关闭设置界面时会弹出Reload DevTools点击重新加载就好。

图例：

二、元素（Elements）

2.1 基本结构图例