记录web开发中的常用的Chrome Devtools技巧

简介

本文主要记录部分web开发，一些浏览器devTools调试的常用的知识记录;

使用环境

• window10
• Google Chrome: 版本 105.0.5195.127（正式版本） （64 位）

DevTools 常用的面板介绍

在页面 按F12 或者 右键->检查，呼出 "devTools"面板；

ElementsDOM节点树形式查看页面的元素，能够对渲染出来的元素进行所见所得的操作；

Console1.用来记录页面在执行过程中的信息(一般通过各种console语句来实现);

2.用来当作 shell 窗口来执行脚本以及页面文档，DevTools等进行交互;

Network

在面板中可以查看通过网络来请求来的资源的详细信息以及资源的耗时等;

Sources

主要用来调试页面中的javascript

Application

记录网页加载的所有资源，包括存储信息，缓存讯息以及页面用的图片，字体，脚本，样式等信息。

• • *使用技巧

---

Elements

按住 alt + 左键点击展开后面所有节点

右键节点菜单介绍

在标签属性上双击，进入编辑状态

Elements右侧的 Styles,Computed,layout,Event Listeners styles：作用在节点上的样式；样式的优先级权重，从上到下作用的(最前面的权重优先级越高)存在样式覆盖； computed: 元素的最终样式结果(包括样式属性，盒子模型)。 Event Listeners: 元素事件监听； Properties: 所有属性集合；

常用的Elements操作：

强大的Elements 能非常方便的 操作以及获取到对应的元素，获取到选择器进行样式设置或者js交互操作。

Console

console分为log,info,error,warn,…等 error：错误，红色字体，如果log多了。error颜色醒目， warn：警告，黄色字体， log || info: 日志打印，常用输出看结果。

console输出的几种方式：

通过 console silderbar 查看过滤查看对应级别的输出;

有时候项目在开发的时候console特别多，通过查看对应级别的输出 + 设置明显的输出语句：

console还可以作为代码编辑器进行脚本执行：

在控制台 shift + enter 换行

可以输入location,window…等BOM相关的

在Console中导入CND库或者npm包。

有时候想在控制台尝试一下npm包或者库的api。可以到对应库的官网打开控制台尝试，这样很麻烦。

• 安装控制台导入插件;地址： console-importer

• $i(name);安装包或者导入脚本； 由于部分网站有严格的内容安全策略限制(GitHub),会执行失败PS: 要在http或https下执行，如果以资源方式file协议打开的控制台，会执行失败。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2bb9e2b01a64733bd60936842363de2~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?” style=“margin: auto” />

• • *### NetWork

网络请求相关的(包括，资源js,css,img,字体，媒体等资源)>

使用 copy()，copy value, copy object 复制打印出来的数据；

在控制台中打印出来的数据结构很复杂，怎么复制出来？

Replay XHR 重新请求一次

复制request请求体信息和响应信息；

PS: ctrl + a 全选 ctrl + c复制下

Sources

webstorm断点调试 请看 -->>传送门： webstorm 断点Sources面板调试 在代码中 debugger,代码运行到这里会进入断点模式

Application

板：Step Over Step Into的使用与其他debug一样的，具体可查看webstorm断点简单的使用：*" style=“margin: auto” />

Application

平常我用来查看 Storage信息

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享