Chrome Dev Tools

已于 2022-06-26 17:22:20 修改
阅读量957 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端 chrome devtools
于 2022-06-26 17:20:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31173561/article/details/125469986
本文详细介绍了如何在浏览器中使用开发者工具，包括快捷键打开、主题切换、截图功能（节点截图、全屏截图等）、常用面板操作（样式查找、事件监听器、控制台用法）及DevTool的定位和布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

打开Dev Tool

1，菜单>更多工具>开发者工具【ctrl+shrift+i】

2.快捷键F12

打开命令菜单

  • ctrl+shrift+p（window）
  • command+shrift+p（MAC） 
  1. 切换到黑色主题

2.切换到白色主题 

 

截屏 

这三种截图方式均不会把展开的dev tool工具截图进去

  • capture area screenshot  框选截图
  • capture full size screenshot 截全屏 （包含滚动的位置。  基于最外层dom元素的高 也就是说HTML设置为百分百或者100vh等无法截图全屏）
  • capture node screenshot 截图选中的节点
  • capture screenshot 截当前屏幕 （不包含滚动）

Dev Tool的位置 dock

 

 常用的tab

查找应用在这个节点上的所有样式

搜索后点击可定位到具体位置

event listener 选中的dom绑定的事件 点击remov可移除

控制台console （ctrl+shrift+j）

  1.  执行语句
  2. $_返回上一条语句的执行结果
  3. $0上一个选择的dom节点（$1,$2....）
  4. console.log(error warn group time  table assert trace clean )
  5. log级别筛选

 

 console.clear()清空控制台

 

Chrome Devtools 高级调试指南（新）总结
JayYuen的博客
10-13 2260
1. Chrome Devtools 的用处 前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发：网络抓包、开发调试Response 测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他：安装扩展插件，如AdBlock、Gliffy、Axure等 2. 菜单面板拆解 Elements - 页面dom元素 Console - 控制台...
【前端学习指南】Chrome Dev Tools 浏览器调试技巧
最新发布
范同学的学习历程
11-19 1293
浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。浏览器工具打开方式：打开命令菜单快捷键：相关命令：dark theme -->DevTool切换成黑色主题light theme -->切换成白色主题Capture area screenshot -->选择范围截图Capture full size screenshot -->选择整个页面截图Capture node screenshot -->捕捉一个node节点截图通过Dock命令可以改变窗口位置Undock命令可
Chrome DevTools 使用指南- 源代码/来源篇
守城小轩的技术窝棚
05-20 2593
2.1文件资源管理器（左侧）通过本指南，我们详细介绍了Chrome DevTools中“源代码/来源”面板的各项功能和使用技巧。从面板布局与基本功能概述，到文件管理、编辑与保存、断点与调试、以及调用栈与作用域的分析，每一个部分都提供了丰富的实用工具，帮助开发者更高效地进行代码调试和优化。无论是初学者还是有经验的开发者，掌握这些功能都将极大提升您的开发效率和代码质量。“源代码/来源”面板作为Chrome DevTools的核心组件，为开发者提供了一个强大的平台，可以直接在浏览器中进行代码编辑、调试和优化。
Chrome DevTools 使用指南- 应用篇
守城小轩的技术窝棚
05-20 1580
在现代Web开发中，浏览器已经不仅仅是一个用于浏览网页的工具，它们也为开发者提供了强大的调试和分析工具。Chrome DevTools 是其中最为广泛使用的一款，提供了全面的开发和调试功能，帮助开发者在构建和优化Web应用时事半功倍。在 Chrome DevTools 中，Application 面板是一个专门用于管理和调试Web应用的强大工具。它涵盖了存储、缓存、安全和服务工作者等多个方面，帮助开发者深入了解和控制应用的数据和行为。
Chrome DevTools 使用指南- 网络篇
守城小轩的技术窝棚
05-19 2372
录制开关（Record button）、清除按钮（Clear button）、筛选器（Filters）、模拟网络条件（Throttling）、禁用缓存（Disable Cache）在Web开发中，性能和可靠性是影响用户体验的关键因素。通过本指南，您已经系统地了解了如何使用Chrome DevTools的网络面板来监控和分析网络活动，优化网页性能，并解决常见的网络问题。首先，我们介绍了网络面板的界面布局和各个功能区，包括工具栏、请求列表、请求详情视图和底部功能区。
customDevTools：在Chrome Dev Tools中使用自定义功能
02-07
向Chrome Dev Tools提供自定义方法/函数和变量，以进行开发调试。 （也可以实现其他功能：例如DOM注入。） 安装 1.在Chrome浏览器地址栏中输入chrome://extensions 2.通过打开页面右上方的拨动开关启用“开发人员...
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
LuckyWinty的博客
02-07 499
背景我们经常使用 Chrome Dev Tools 来开发调试，但是很少知道怎么利用它来分析页面性能，这篇文章，我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及...
如何在Chrome Dev Tools中自定义开发工具功能
Chrome Dev Tools是一款内置在Google Chrome浏览器中的开发者工具，它提供了一系列强大的调试功能，允许开发者分析网页、调试JavaScript代码、审查网络活动等。然而，在某些特定的开发场景中，Chrome Dev Tools默认...
Chrome Dev Tools实用代码段：link-counter与heading提取
资源摘要信息:"Chrome Dev Tools代码段示例" 知识点详细说明: 1. Chrome Dev Tools概述 Chrome Dev Tools是Google Chrome浏览器内置的一套功能强大的网页调试和开发工具，主要用于帮助开发者观察网页行为、诊断...
Chrome DevTools基本操作和功能介绍
工作的日常记录和平凡的生活分享
05-30 1799
Chrome DevTools 是一套内置于 Google Chrome 浏览器中的开发者工具集，它为前端开发者提供了调试网页的强大功能。通过 DevTools，开发者可以进行性能分析、网络状况监控、JavaScript 调试、代码编辑、模拟移动设备测试等。专为开发者设计，用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素，到深入的性能分析和网络通信追踪。
【闲聊】-Chrome DevTools简介与启动方法
前鼻音的博客
05-22 934
Chrome DevTools是Chrome浏览器内置的一套网页开发调试工具，适用于前端开发人员。以下是如何启动DevTools以及各个面板的功能列表。
浏览器调试工具-Chrome Dev Tools
qq_68874993的博客
08-15 1589
浏览器调试模式下的各个调试工具是开发者进行网页开发和调试的重要工具
【Chrome Dev Tool】简单使用
RachelY111的博客
09-13 1488
Chrome浏览器中的Dev Tool调试工具的简单使用讲解，介绍Dev Tool中的常用快捷键、常用功能、不同面板作用等方面知识。
Chrome DevTools（Chrome 开发者工具）介绍
cnds123的专栏
01-11 4395
Chrome DevTools（Chrome 开发者工具）介绍 Chrome DevTools （Chrome 开发者工具）是一套内置于Google Chrome（Google开发的免费网页浏览器）中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。 Chrome DevTools （Chrome 开发者工具）官方文档（左下角有语言选择）： https://developers.google.com/web/tools/chrome-devtools/ 上面网址一般打不开，若打不开，可.
Chrome DevTools
bettyHHUC的博客
04-30 1340
The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. We can use the DevTools to iterate, debug, and profile the site. Open DevTools Right-click a page element...
Chrome开发者工具详解  
weixin_34272308的博客
07-13 241
作为一名前端开发者，打交道最多的可能是和浏览器。市面上各种浏览器多不胜数，主流的有Chrome，Firefox，Safari，IE，Opera，非主流的如360，遨游，QQ浏览器，搜狗浏览器，据说淘宝最近也要出浏览器了。不过个人最喜欢的还是Chrome，因为它的简洁和快速，还有功能的强大。FF什么的我觉得它已经慢得跟不上时代了:-D，这是个人意见，喜欢FF的朋友尽管吐槽。虽然...
全新Chrome Devtools Performance使用指南
weixin_34210740的博客
10-11 662
运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Respon...
Chrome Devtool 学习
ckwang6的博客
03-20 577
虽然devtool一直在用，可是平时使用的也就那几个功能，为了能够深入前端开发的基础，还是要详细的看一下devtool都有哪些功能。
Chrome DevTools浏览器开发者模式、Vue DevTools、vs和DevTools调试、插件
luemeon的博客
06-30 6566
目录ElementsStylesDOM结构 增删属性 模拟元素的伪状态，方便调试Computed LayoutEvent ListenersNetworkApplication资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）Source 调试Page:资源目录Content scripts: 插件Snippets: 便捷测试https://developer.chrome.com/docs/devtools Ancestors 是否
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值