Chrome开发者工具介绍Chrome开发者工具介绍目录一、准备工作 1.1 开发者工具打开的几种方式 1.2 将开

Chrome开发者工具介绍

一、准备工作

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

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

二、开发工具主要功能

2.1手机图标（设备工具栏）

2.2Elements（元素面板）

2.3.Console（控制台面板）

2.4.Sources（源代码面板）

2.5.Network（网络面板）

2.6.Performance（性能面板）

2.7 Application（应用）

2.8 Lighthouse

2.9 Memory（内存面板）

三。扩展程序

四。参考文献

一、准备工作

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

（1）鼠标右键页面，选择检查

（2）选择浏览器右上角三个点符号 --> 更多工具 --> 开发者工具

（3）按F12,如果F12键被占用则使用组合键 Fn + F12;

（4）使用快捷键 Ctrl + Shift + i;

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

在打开的页面中，选择右上角处从上到下的第一排设置按钮（齿轮⚙图标），在打开的页面中找到 Language 选项，选择你所需要的语言即可（例：中文：chinese-中文）

再次打开开发者工具，便能够看到你所设置的语言格式

二。开发工具主要功能介绍

1.手机图标（设备工具栏）：点击可切换为浏览器/手机/pad尺寸。点击尺寸，可根据需求选择不同的尺寸大小，也在尺寸旁的输入框自定义尺寸大小。

2.Elements（元素面板）：元素面板让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素

3.Console（控制台面板）：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互

4.Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

5.Network（网络面板）：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化

6.Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能

7.Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等

8.Lighthouse：将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告

9.Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用情况

2.1手机图标（设备工具栏）

点击控制台的左上角一个手机的图标将会把视口改成移动端。可以自己调整手机尺寸

2.2 Elements（元素面板）

（1）基本结构图例

在下图，选中 Elements面板，左侧栏会显示页面的 DOM结构，右侧栏显示对应的选中节点样式以及标准盒模型,可以方便查看页面任意内容的宽、高等属性。

（2）元素操作

.双击想要修改的部分，直接进行编辑。也可以选中要修改的行，点击右键，在右键选择修改。当然这只是对当前的页面进行修改，不会改变源代码，只适用于代码调试。

.修改 dom 的类型：选中dom，直接修改类型

. 更改 dom 的 id、class的名称；选中dom，直接修改名称

. 移动 dom 的位置：选中dom进行拖拽

. 隐藏dom: 选中dom并按下键盘上的H键，就可以快速隐藏该元素。操作实际上增加了visibility:

点击箭头选中一个元素，可以在HTML面板中定位到该元素，并且可以在右侧styles面板中查看和编辑该元素的样式，编辑时，效果可以实时更新，这对于前端工程师解决样式问题是个大大的福利，在HTML面板中ctrl+F，可以对html中的内容进行搜索。

.在Elements面板中无论修改HTML结构还是CSS代码，修改以后的效果都会实时同步到页面中。

（3）计算样式

如下图：列出该页面所用到的所有样式以及盒模式。可在里面进行搜索查找，点击某一样式的箭头，则会跳转定位到 Styles(样式)处

（4）布局精细化的查看页面布局情况

（5）事件监听器列出页面中所有绑定的事件

（6）DOM断点监听当前元素移除，变化等操作后进行的断点隔断；

（7）属性列出所有节点的属性，

（8）无障碍功能帮助构建无障碍页面，无障碍对盲人更友好

2.3 Console（控制台）

（1）基本信息图例

（2） console常用打印调试

console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定义错误信息 console.info("我是个信息");//在控制台打印自定义信息 console.warn("我是个警告");//在控制台打印自定义警告信息 console.clear();//清空控制台 var params = [ {name: "张三", age: 22, sex: "男"}, {name: "小红", age: 18, sex: "女"} ] console.table(params);//在控制台打印自定义表格信息 console.dir(对象)//在控制台打印指定对象的JSON表示形式

（3）定位错误原因

（4）JavaScript操作

书写JavaScript代码，并运行。

在编写代码时，按“Shif+Enter”组合键可以实现代码的换行。

（5）创建实时表达式

单击眼睛图标，创建实时表达式，输入要监控的表达式，比如查看当前的时间戳，输入 Date.now()，会发现当前时间戳会一直变动。也就是表示式被重新计算了，执行频率是250毫秒。

如果创建实时表达式，则只能打印输入时刻的一个时间值。

2.4 Sources（源代码）

（1）基本结构图例

可以在源码中设置断点，查看数据流向，以及异常监听拦截

（2） debug调试基本信息图例

方式1：代码里面需要调试地方添加debugger，运行到debugger处直接触发断点

方式2：在源文件里面找到要打断点位置，点击行号，标记为调试行

点击断点右键，有三个选项：修改断点、移除断点，停用断点

（3）debugger 单步调试

单步调试就是点一下，执行一句程序，并且可以查看当前作用域可见的所有变量和值。而debugger就是告诉程序在那里停下来进行单步调试，俗称断点。

在断点的时候，查看变量的方法

1.鼠标移到变量上面，直接看变量值

2.点击右侧的 Watch(监视)，点击+号后输入要监视的值，可以监视，某变量的变化

3.添加js代码，打印变量。比如上面加console.log(num),然后添加断点，就可以直接输入到控制台。

（4）调用堆栈

在断点过程中，可以看到每次请求的调用方法顺利。点击方法，可以定位方法内容。

（5）可断点的事件监听列表

打开这个列表，可以在监听事件并且在触发该事件时进入断点，调试器会停留在触发事件代码行。只需要展开事件列表，选择要监听的事件打上勾即可

（6）Sourcemap

Sourcemap：就是一个信息文件，它里面存储着代码转换前后的对应位置信息，也就是转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射， Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，debug 困难的问题。

项目在开发完进行build后，在打包文件夹里除了有js，css，图片等资源，还有.js.map文件，这种就是sourcemap文件。

打包的代码使用Source Map文件，相对于代码的映射，不是源文件，所以修改无效。

例子：.使用chrome的调试项目，然后不能点击断点？

处理方法：源代码的{} （点击代码块格式化），

如果还是不能定位，那chrome浏览器-》设置-》偏好设置-》源代码-》启用JavaScript源代码映射的复选框去掉勾选

原因：就是本地环境解析的时候vite启用了源代码映射，导致定位不到原来的代码

2.5 Network（网络）

（1）基本结构图例

Controls (控件) : 使用这些选项可以控制 Network (网络)面板的外观和功能。
Filters (过滤器) : 使用这些选项可以控制在请求列表中显示哪些资源。提示：按住 Cmd （Mac）或 Ctrl （Window / Linux），然后点击过滤器可以同时选择多个过滤器。
Overview (概览) : 这个图表显示检索资源的时间轴。如果您看到多个垂直堆叠的栏，这意味着这些资源被同时检索。
Requests Table (请求列表) : 此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。
Summary (概要) : 概要窗格告诉您请求的总数，传输的数据量，和加载时间。