Chrome调试工具的使用【详细】

最新推荐文章于 2025-10-10 08:05:57 发布
原创 最新推荐文章于 2025-10-10 08:05:57 发布 · 6.2k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #前端 #javascript

本文介绍了Chrome开发者工具的基础操作，包括如何打开和使用命令菜单、常用Tab页的功能；讲解了CSS调试的方法，如检查元素、查询DOM节点等；还介绍了如何使用控制台进行JavaScript调试、网络面板监控网络请求、客户端面板管理localStorage和cookies。

Chrome 调试工具入门

一、基本介绍

1、打开dev tool

方式1：菜单-》更多工具-》开发者工具

方式2：快捷键F12
在这里插入图片描述

2、打开命令菜单

方式：快捷键 ctrl+shift+P

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NcESvsX-1668949286641)(../Pic文件夹/1668944584544.png)]

使用举例：

1）截屏：screen shot

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2A2gnvr2-1668949286643)(../Pic文件夹/1668944637386.png)]

2）修改主题颜色为日间模式：light theme

3）修改窗口位置靠右：dock to left

4）…

3、五个常用的Tab

1）Element

2）Console

3）Source

4）NetWork

5）Application

二、CSS调试（Element）

1、检查元素

方式1：右击页面元素-》检查我

方式2：打开dev tool-》鼠标移动到待检查元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8Xi6xpY-1668949286643)(../Pic文件夹/1668945650992.png)]

如何切换到移动设备？

方式：点击移动设备小图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QNClE1l-1668949286644)(../Pic文件夹/1668945708507.png)]

2、查询DOM树中某一个DOM节点

使用 快捷键ctrl+F

方式1：文本查询

例如：输入section_one，输入对应节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vemlAoW-1668949286644)(../Pic文件夹/1668945797600.png)]

方式2：CSS选择器

例如：输入section#section_two（查找id为section_two的section节点元素）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Civxi2sI-1668949286645)(../Pic文件夹/1668945898922.png)]

方式3：Xpath

例如：输入//section/p（在全局范围内查找section里面的p节点）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o6EnM7ib-1668949286647)(../Pic文件夹/1668945994950.png)]

方式4：使用console的inspect方法

例如：查找id为section_seven的节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxoqkQgU-1668949286647)(../Pic文件夹/1668946088121.png)]

按下回车后，跳转到Element的DOM树中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4Obl7rL-1668949286648)(../Pic文件夹/1668946155465.png)]

三、编辑样式（Element）

1、编辑节点样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-stgbiIFg-1668949286649)(../Pic文件夹/1668946217188.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SRG7EwAt-1668949286650)(../Pic文件夹/1668946239063.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBUHqWtV-1668949286651)(../Pic文件夹/1668946305310.png)]

2、复制样式

1）找到想要复制的元素——》右键检查元素——》右击选中元素，点击copy，copy styles

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2d8V088-1668949286651)(../Pic文件夹/1668946492238.png)]

2）选择自己想要应用该样式的元素，在element.style中复制改样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLS2CdFU-1668949286652)(../Pic文件夹/1668946583823.png)]

四、控制台console

1、打开方式：快捷键 ctrl+shift+I

2、控制台的基本使用

1）定义变量，并查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxhPrNV5-1668949286652)(../Pic文件夹/1668946790862.png)]

2）弹出警示框

在这里插入图片描述

3）console.log(xxx)，打印内容

在这里插入图片描述

4）$_， 返回上一条语句的执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGguL46W-1668949286655)(../Pic文件夹/1668946894718.png)]

5）$+数字，返回之前选中的某个节点

$0 返回上一个选中的节点

$1 返回上上一个选中的节点

以此类推

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOPxXYHF-1668949286655)(../Pic文件夹/1668947033821.png)]

6）console相关的语句

  1. console.log() 普通信息

  2. console.error() 错误信息

  3. console.warn() 警告信息

  4. console.clear() 清空控制台
    在这里插入图片描述

  5. console.group() 批量处理一组console语句
    在这里插入图片描述

  6. console.time() 判断一段代码的执行时间
    在这里插入图片描述

  7. console.table() 将一个数组以表格形式呈现出来
    在这里插入图片描述

其他：assert,trace

3、JavaScript调试

方式1：在代码中加上debugger语句，程序执行到该位置后会暂停，不断点击下一步即可查看变量值的变化。

在这里插入图片描述

方式2：在dev tools中点击要打断点的行号，刷新页面，单步执行

在这里插入图片描述

五、网络Network

1、基本介绍

在这里插入图片描述

Name：请求的资源名称

Status：状态码

Type：请求的资源类型

Initiator：请求发起者

Size：资源的大小

Time：请求资源的实践

Waterfall：瀑布流，详细信息如下：

在这里插入图片描述

2、筛选不同类型的资源

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlDfFJID-1668949286662)(../Pic文件夹/1668948284260.png)]

3、保留历史请求：勾选Perserve log

在这里插入图片描述

当页面出现跳转/刷新后，之前的请求依然可以保留

在这里插入图片描述

4、清除浏览器缓存：勾选Disable cache

5、模拟用户网络状态：节流器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4oBLJjch-1668949286664)(../Pic文件夹/1668948426007.png)]

6、传输详细信息

在这里插入图片描述

内容：发起的请求个数，数据量、完成时间、加载时间等

六、客户端Application

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oGPbPftd-1668949286665)(../Pic文件夹/1668948681679.png)]

1、local Storage和Session Storage对比：

local Storage：会一直存储在本地浏览器，直到人为清除它。

Session Storage：在会话结束、页面关闭后，就会自动清除。

2、localStorage相关方法

1）setItem方法：设置localStorage

在这里插入图片描述

2）getItem方法：获取localStorage的值

在这里插入图片描述

3）clear方法：清除某个localStorage的值

在这里插入图片描述

3、cookies

1）设置cookie

在这里插入图片描述

2）设置cookie过期时间

方法1： cookie.setMaxAge(0);//不记录cookie

方法2：cookie.setMaxAge(-1);//会话级cookie，关闭浏览器失效

方法3：cookie.setMaxAge(60*60); //过期时间为1小时

Chrome DevTools攻略
数字人生
05-29 1544
Elements（元素）：用于查看和编辑HTML元素和CSS样式，实时预览修改效果。Console（控制台）：显示JavaScript运行时的错误和警告信息，支持直接输入JavaScript代码执行。Sources（源代码）：调试JavaScript代码，设置断点，查看和编辑源文件。Network（网络）：分析网页资源加载情况，包括时间线、大小、HTTP头信息等，帮助优化性能。（性能）：记录和分析页面加载和脚本执行的时间线，找出性能瓶颈。Memory。
【接口测试】Chrome浏览器F12调试工具抓包详细分析（超细）
m0_70102063的博客
09-27 6606
调试时使用最多的功能页面是：元素（ELements）、控制台（Console）、源代码（Sources）、网络（Network）等。元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点（DOM断点：在JavaScript调试中，我们经常使用到断点调试，其实在DOM结构的调试中，我们也可以使用断点方法，这就是DOM Breakpoint（DOM 断点））控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
Chrome 开发者调试常用工具
q515656712的博客
06-21 3980
Chrome调试工具详解摘要 本文全面介绍了Chrome开发者工具的各项功能及使用方法： Elements面板 查看/修改DOM结构和CSS样式 支持Grid布局调试和伪类效果预览 提供DOM断点功能（子树修改、属性变更等） Console面板 显示日志信息并支持命令行交互 提供日志过滤和监听功能 可设置保留日志、显示时间戳等选项 Sources面板 调试JavaScript代码的核心区域 支持断点设置、条件断点和日志输出 提供调用堆栈、变量监控等调试功能 Network面板 分析网络请求和资源加载情况 支
chrome-调试技巧个人总结
badbaby52906的博客
02-16 8768
在控制台输入下面一段代码（时间自己选择），返回页面，鼠标放在需要调试的dom上，把hover样式显示出来，等待 debugger，然后就能安心调试hover样式了。先定位到要调试的元素，
chrome调试工具
最新发布
Made In SQL
10-10 1021
Chrome 调试工具（DevTools）是Chrome浏览器内置的一套强大的网页开发和调试工具。检查和修改HTML/CSS结构调试JavaScript代码执行过程分析网络请求性能瓶颈测试移动设备适配性和响应式设计检查内存使用情况和查找内存泄漏模拟不同网络条件和设备环境。
chrome调试工具的使用
java_996的博客
11-04 577
chrome调试工具 1.调试工具的打开方式： 打开浏览器，按下F12或者右击鼠标选择检查 选择元素即Elements,当我们把调试框放在屏幕下沿时，左边是html，右边是css (我们可以选择屏幕右侧的三个点，在Dock side一栏中选第三个即为在屏幕下沿排列 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BpZwKunL-1635993891544)(C:\Users\Agoni\AppData\Roaming\Typora\typora-user-images\163
Chrome调试工具
qq_44757223的博客
03-05 897
文章目录前言一、打开调试工具二、使用调试工具 前言 Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。 一、打开调试工具 打开Chrome浏览器，按下F12或者右击页面空白处→检查 二、使用调试工具 Ctrl+滚轮可以放大开发者工具代码大小 左边是HTML元素结构，右边是css样式 右边css样式可以改动数值（左右箭头或者直接输入）和查看颜色 Ctrl+0复原浏览器大小 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误 如果有样式，但是样式前
不常见但很有用的chrome调试工具使用方法
06-24 716
对于chrome调试工具，常用的是elements标签、console标签、sources标签和network标签。但实际上，还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法。
9种使用Chrome Firefox 自带调试工具调试javascript技巧
10-18
本文将详细介绍9种使用Chrome和Firefox内置调试工具进行JavaScript调试的技巧。 1. **使用`debugger`语句**：`debugger`是JavaScript的一个关键字，当执行到这一行时，浏览器会自动暂停，便于检查当前上下文，无需...
vue2以及vue3 chrome调试工具
09-22
Chrome调试工具是开发者在Web开发过程中不可或缺的辅助工具，特别是对于Vue应用来说，Vue DevTools是一个必不可少的扩展。 Vue DevTools是一款专门为Vue.js设计的Chrome浏览器插件，它允许开发者深入到应用程序的...
ecdevtools是支持canvas库的chrome调试工具
08-11
总的来说，ec-devtools作为一款专业的canvas调试工具，不仅简化了canvas元素的调试过程，还提高了开发效率，对于那些致力于JavaScript开发，尤其是处理图片展示和处理的开发者来说，是一个不可或缺的辅助工具。...
Chrome调试工具使用方法
10-24
Google Chrome 浏览器自带了丰富的开发人员工具，让您可以随时随地对任何网页的 CSS、 HTML 和 JavaScript 进行实时编辑、调试以及监控。
使用Chrome开发者工具对本机iOS应用进行远程调试-Swift开发
05-27
weex-devtool-iOS使用Chrome开发人员工具对本机iOS应用程序进行远程调试启动首先，通过$ npm i安装[weex-toolkit] [电子邮件保护] -g然后运行命令：$ weex debug您可以看到QR weex-devtool-使用Chrome开发者工具为您...
全新Chrome Devtools Performance使用指南
weixin_34210740的博客
10-11 686
运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Respon...
附录1-chrome调试工具
potato123232的博客
02-24 4192
1打开chrome调试工具 我们用谷歌浏览器打开一个网页后，按下F12可以弹出chrome调试工具，点击Elements这一项 左侧是html，右侧是css 2调试值或内容 在右边的css中，我们可以改动数值，比如我现在想把这个字变蓝 在这里改成blue，这个字就变蓝了 在这里调试后不会帮你保存 3通过元素找到html代码 这里有一个箭头，点一下这个箭头 把箭头移动到我们内容上，它就会告诉你这个内容在html文件中的哪个部分 4css中出现错误的情况 用这........
Chrome调试工具的使用
m0_48375854的博客
11-05 597
作为一名合格的程序员，会使用调试工具当然是必不可少的啦，今天就和大家分享几个用Chrome调试工具调试 HTML 结构和 CSS 样式的小妙招。 当我们写好结构和样式后，在谷歌浏览器中打开就可以看到我们的页面啦。小熊写了一个简单的页面，展示如下： ...
Chrome调试工具了解和使用
weixin_61897906的博客
01-09 350
跟学B站黑马程序员pink老师，欢迎指正。
chrome浏览器调试工具的使用
weixin_33860147的博客
10-20 335
废话不多说,给大家介绍一下最基本的浏览器调试工具 这个就是chrome浏览器的调试界面,怎么调出来大家都知道吧 第一个箭头是,选择元素,激活后,在页面中鼠标移动到那地方,下面的Elements窗口会自动移动到相应的代码段 第二个手机就是切换到手机界面 1.Elements是显示页面代码的窗口 2.console是浏览器控制台,可以直接在里面写js代码 3.Sources...
Chrome调试工具使用
hl0322的博客
02-22 732
1.打开chrome浏览器，按下F12或者右击页面空白处-检查，点击调试工具左上角获取页面元素箭头，点击页面所需要获取页面元素信息。页面跳转至博客代码信息页面，Console部分是展示网页html网页结构部分代码，右边styles展示的是网页CSS样式代码。○5如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。○3右边是css样式可以改动数值（左右箭头或者直接输入）和查看颜色。○6如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误。○2左边是html元素结构，右边是css样式。
Extjs Chrome调试工具插件使用指南
#### 描述分析：Extjs Chrome调试工具 - **Extjs**: Extjs是Sencha公司开发的一个开源JavaScript框架，用于构建交互式的Web应用程序。Extjs提供了丰富的组件库，支持数据驱动的视图、复杂的布局管理以及丰富的用户...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值