Chrome DevTools攻略（话题文章）

原创 已于 2024-05-28 13:29:41 修改 · 2.2k 阅读 · 33
标签
#chrome devtools
于 2024-05-27 22:06:37 首次发布
Chrome DevTools是一套强大的网页开发和调试工具，可以帮助开发者深入了解浏览器内部，定位页面问题，优化网络和渲染性能。通过Elements面板检查和编辑DOM及样式，使用Console进行JavaScript调试，借助Network面板分析资源加载，利用Timeline和Profiler提升性能，还有审查存储等功能。掌握DevTools的快捷键和使用技巧，能大幅提升开发效率。

目录

Chrome DevTools 概览

访问 DevTools

DevTools 窗口

审查DOM元素和样式

使用Console

调试 JavaScript

提高网络性能

监听

提高渲染性能

JavaScript & CSS 性能

审查存储

扩展阅读

扩展资源

Chrome DevTools 概览

Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用DevTools，可以更加高效的定位页面布局问题，设置JavaScript断点并且更好的理解代码优化。

注意: 如果你是一个web开发者并且希望获取最新版本的DevTools，你可以使用 Google Chrome Canary.

访问 DevTools

访问DevTools，首先用Chrome打开一个web页面或web 应用，也可以通过下面的方式：

  • 在浏览器窗口的右上方选择Chrome菜单, 然后选择工具 > 开发者工具。
  • 在页面上任意元素上右键，然后选择审查元素。

DevTools窗口会在Chrome浏览器的底部打开。

下面是一些有用的快捷键来快速的打开DevTools:

  • 使用 Ctrl + Shift + I (Mac上为 Cmd+Opt+I)打开DevTools。
  • 使用 Ctrl + Shift + J (Mac上为 Cmd+Opt+J)打开DevTools中的控制台
  • 使用 Ctrl + Shift + C (Mac上为 Cmd+Shift+C)打开DevTools的审查元素模式。

为了日常工作，学习快捷键将帮助你节省更多的时间。

DevTools 窗口

DevTools 在窗口顶部的工具栏对不同的任务功能进行分组。在每个工具栏选项卡和对应的操作面板中，你可以处理某项特殊的任务，例如DO

最低0.47元/天 解锁文章
Chrome DevTools攻略
数字人生
05-29 1680
Elements（元素）：用于查看和编辑HTML元素和CSS样式，实时预览修改效果。Console（控制台）：显示JavaScript运行时的错误和警告信息，支持直接输入JavaScript代码执行。Sources（源代码）：调试JavaScript代码，设置断点，查看和编辑源文件。Network（网络）：分析网页资源加载情况，包括时间线、大小、HTTP头信息等，帮助优化性能。（性能）：记录和分析页面加载和脚本执行的时间线，找出性能瓶颈。Memory。
Chrome DevTools基本操作和功能介绍
工作的日常记录和平凡的生活分享
05-30 2141
Chrome DevTools 是一套内置于 Google Chrome 浏览器中的开发者工具集，它为前端开发者提供了调试网页的强大功能。通过 DevTools，开发者可以进行性能分析、网络状况监控、JavaScript 调试、代码编辑、模拟移动设备测试等。专为开发者设计，用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素，到深入的性能分析和网络通信追踪。
Chrome Devtools 高级调试指南（新）总结
JayYuen的博客
10-13 2446
1. Chrome Devtools 的用处 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发：网络抓包、开发调试Response 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他：安装扩展插件，如AdBlock、Gliffy、Axure等 2. 菜单面板拆解 Elements - 页面dom元素 Console - 控制台...
NodeJS远程调试--Chrome DevTools
Kata的博客
05-08 1648
目录 Nodejs 使用 Chrome DevTools 调试 一、远程调试步骤 二、 指定端口调试 Nodejs 使用 Chrome DevTools 调试 参考链接： https://cnodejs.org/topic/5a9661ff71327bb413bbff5b https://github.com/nswbmw/node-in-debugging/blob/master/4.2%20Chrome%20DevTools.md （补充：推荐结合nodemon使用。可以...
谷歌浏览器 | Chrome DevTools系统学习篇-概述
happy921212的博客
05-05 5695
Chrome DevTools是一套直接内置到谷歌Chrome浏览器的web开发工具。DevTools可以帮助您即时编辑页面并快速诊断问题，最终帮助您更快地构建更好的网站。我们今天的概述主要讲述谷歌浏览器的日常使用和几大常见控制面板的介绍……
DevTools开发者工具(chrome谷歌浏览器)
Tongyao
06-17 7741
概述 官方文档 https://developers.google.com/web/tools/chrome-devtools/ （需科学上网） 打开方法： 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查” 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac) 前言： chrome的开发者工具可以说是十分强大了，是web开发者的一大利器，作为我个人而言平时用到的几率很大，相信大家也很常见，但是不要仅仅停留在点选元素看看样
chrome Devtools攻略
mj256115的博客
05-24 1802
Elements（元素）面板：查看和编辑网页的 HTML 和 CSS，实时预览修改效果。Console（控制台）面板：输出日志信息、查看错误信息，执行 JavaScript 代码。Sources（资源）面板：查看和调试网页加载的脚本文件。Network（网络）面板：监测所有网络请求的详细信息，分析性能问题。Performance（性能）面板：分析网页性能，找出优化点[。Memory（内存）面板：了解网页对内存的使用情况。
Chrome浏览器安装devtools开发者工具
Liberty_yes的博客
10-14 4865
Chrome浏览器安装devtools开发者工具 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 Ma
Chrome DevTools 谷歌开发者工具完全指南
最新发布
Scott_KD的博客
05-09 2351
Chrome DevTools（谷歌开发者工具）是内置于Google Chrome浏览器中的一套网页开发和调试工具。它为前端开发者提供了强大的功能，可以用来调试JavaScript、分析网页性能、检查DOM元素、监控网络请求等。左侧功能显示当前页面渲染后的完整HTML代码支持双击修改任意代码Delete键可删除节点右键菜单提供丰富操作：添加/编辑属性复制节点（支持XPath、CSS选择器等）隐藏元素DOM断点设置递归展开/折叠子节点截图等右侧功能Styles：查看和修改元素样式。
Chrome DevTools 使用指南- 网络篇
守城小轩的技术窝棚
05-19 2703
录制开关（Record button）、清除按钮（Clear button）、筛选器（Filters）、模拟网络条件（Throttling）、禁用缓存（Disable Cache）在Web开发中，性能和可靠性是影响用户体验的关键因素。通过本指南，您已经系统地了解了如何使用Chrome DevTools的网络面板来监控和分析网络活动，优化网页性能，并解决常见的网络问题。首先，我们介绍了网络面板的界面布局和各个功能区，包括工具栏、请求列表、请求详情视图和底部功能区。
【闲聊】-Chrome DevTools简介与启动方法
前鼻音的博客
05-22 1185
Chrome DevTools是Chrome浏览器内置的一套网页开发调试工具，适用于前端开发人员。以下是如何启动DevTools以及各个面板的功能列表。
让谷歌浏览器Chrome支持md（markdown）语法
朱梦阳
08-26 3412
经常用Vim的朋友，在Vim中有一个Markdown语法高亮的插件，叫做：vim-markdown，用起来还不错。 在Chrome中有一个实时预览Markdown效果的扩展，叫做：Markdown Preview Plus(下载) 其大致原理，就是在Chrome现实的时候，这款扩展能够自动把Markdown转换为HTML语法并进行显示。 使用的方法也很简单，直接在Chrome的store中安装这款扩展，然后，记得在Chrome的扩展设置页面，一定勾选允许访问文件网址。因为我们要直接从Ch...
揭秘Chrome DevTools：从原理到自定义调试工具
qq_66118130的博客
03-04 841
CDP（Chrome DevTools Protocol）是Chrome DevTools与浏览器内核通信的协议。它基于WebSocket，允许开发者通过发送JSON格式的命令来控制浏览器行为，并获取调试信息。通过 CDP，DevTools 能够实时与页面交互，实现断点调试、性能分析等功能。为何需要自定义调试工具？DevTools 的局限性▪针对网页设计。
前端_调试工具_Chrome Devtools
分享程序相关知识
06-06 1962
谷歌浏览器自带了调试工具Chrome Devtools，专为开发者设计，用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素，到深入的性能分析和网络通信追踪。
前端常用工具介绍
StartLine_05的博客
09-01 458
Chrom 调试 九大功能面板： 1 Elements元素面板： 检查调整调试页面，调试DOM，调试CSS； 2 NetWork网络面板： 调试请求，了解页面静态资源分布，网页性能检测； 3 Console控制台面板： 调试JavaScript，查看Console log日志，交互式代码调试； 4 Sources源代码资源面板： 调试JavaScript页面源代码，进行断点调试代码； 5 Application应用面板： 查看&调试客户端存储，如Cookie、LocalStorage、session
chrome介绍与用法
前端岚枫
07-17 1653
chrome介绍与用法chrome介绍与用法1. 认识devTools功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 ...
Chrome DevTools
sjslln的博客
04-16 1279
chrome DevTools使用及详解 打开Chrome开发者工具 在Chrome菜单中选择更多工具>开发者工具 在页面元素上右键点击，选择检查 使用快捷键Ctrl+Shift+I(Windows)或Cmd+Opt+I(Mac) 打开最近使用的面板Cmd+Option+I(Mac)或Ctr+Shift+I(Windows) Elements元素面板 检查元素，点击右上角的检查按钮（箭...
Chrome DevTools 一：简介 & Console （入门必看）
Eighteen Z
10-17 1979
查看记录或错误消息运行JavaScript。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值