Chrome开发者工具(DevTools)使用技巧

最新推荐文章于 2024-05-30 09:10:03 发布
最新推荐文章于 2024-05-30 09:10:03 发布
阅读量8.8k 收藏 33
点赞数 12
分类专栏： 爬虫 文章标签： Chrome 爬虫 Chrome开发工具
原文链接：https://editor.csdn.net/md/?articleId=102529583
版权

文章目录

9大功能面板

  1. Elements元素面板：检查和调整页面，调试DOM和CSS
  2. Network网络面板：调试请求，了解页面静态资源分布，网页性能检测
  3. Console控制台面板：调试JavaScript，查看日志，交互式代码调试
  4. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试
  5. Application应用面板：查看和调试客户端存储，如Cookie、LocalStorage、SessionStorage
  6. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化
  7. Memory内存面板：JavaScript CPU分析器，内存堆分析器
  8. Security安全面板：查看页面安全及证书问题
  9. Audis面板：使用Google Lighthouse辅助性能分析，给出优化建议

打开方式

  • 在Chrome菜单中选择：更多工具 > 开发者工具
  • 在页面元素上右键点击，选择“检查”
  • 使用快捷键：
    • command + option + I (mac) 或 Ctrl + shift + I (Windows) 打开最近关闭的状态
    • command + option + C (mac) 或 Ctrl + shift + C (Windows) 直接打开Elements元素面板
    • command + option + J (mac) 或 Ctrl + shift + J (Windows) 直接打开Console控制台面板

禁用缓存

  1. 切换到“Network”网络面板
  2. 勾选“Disable cache”项

img

手动清理网站缓存

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “clear site data”
  3. 敲回车键

img

弹出命令输入框

img

输入命令

此操作能清空Cookies、WebSQL、Service Workers、Cache Storage、IndexedDB、Local Storage、Application Cache

展开某标签下所有层级的标签

  1. 切换 “Elements" 元素面板
  2. 按住 Alt 键点击某个文档节点左侧的小箭头

img

强制设置元素的状态

  1. 选中元素
  2. 点击Style面板下的“ :hov ” 按钮
  3. 勾选要切换的状态

img

查找某元素绑定的事件

  1. 切换 “Elements" 元素面板，点击文档节点
  2. 选择 “Event Listeners” 页签
  3. 展开相应的事件名，如“click”
  4. 对 “handler” 点击右键，选择 “Show funciton definition”

img

选择文档节点

img

选择 Event Listeners 页签

img

展开事件

img

右键“handler”

img

定位结果

打开某个资源文件

  1. 按 command + p （windows 按 Ctrl + p），弹出文件搜索框
  2. 输入文件名
  3. 敲回车键

img

弹出文件搜索框

img

输入文件名

快速定位源代码行数

  1. 按 command + p （windows 按 Ctrl + p），弹出输入框
  2. 输入 :行数，如 “:480”
  3. 敲回车键

img

格式化代码

点击已打开文件左下角的花括号按钮

img

img

格式化结果

对某行代码打断点

  • 点击代码左侧的行号
  • 鼠标移至代码中的变量可实时查看值

img

QQ20190822-134244.png

监听断点环境下的变量

  1. 切换 “watch” 面板
  2. 点击 “ + ” 按钮
  3. 输入要监听的变量
  4. 敲回车键

img

img

img

查找加载图片的代码

  1. 切换 “Network” 网络面板
  2. 点击 “Initiator” 列下的文件名

img

img

定位结果

全局查询请求头和响应体

  1. 切换 “Network” 页签
  2. 点击左上角的“放大镜”按钮
  3. 在弹出的搜索框中输入要查询的内容
  4. 敲回车键

img

img

img

QQ20190822-090016.png

切换网络模式

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择要切换的网络模式

img

img

限制网速

  1. 切换 Network 网络面板
  2. 点击 “ online ” 下拉面板
  3. 选择 “ add ” 选项
  4. 点击 “ Add custom profile… ” 按钮
  5. 依次输入“Profile Name”、“Download”、“Upload”等输入项
  6. 点击 “Add” 按钮
  7. 回到 Network 网络面板切换所新增的网络模式

img

img

img

img

img

在Console控制台查找DOM

  1. 切换到Console控制台面板
  2. 输入：document.querySelectorAll("#APP")
  3. 敲回车键，展开输出结果，点击红色框位置将会跳转到相应的元素节点

img

img

跳转结果

在控制台中输入多行代码

按住Shift键敲回车即可换行

img

img

换行效果

手动添加Cookie

  1. 在Application面板中按 esc 键，打开控制台面板
  2. 输入：document.cookie = “test=1”

img

手动添加LocalStorage

  1. 在Application面板中按 esc 键，打开控制台面板
  2. 输入：localStorage.setItem(‘test’, ‘1’)

img

模拟手机调试

点击 DevTools 左上角的手机图标按钮，如图：

img

手机调试面板菜单介绍

img

打开传感器设置面板

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “ show Sensors ”
  3. 敲回车键

img

传感器设置面板介绍

img

QQ20190822-235212.png

设置网页 User agent

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入 “ show Network conditions ”
  3. 取消勾选 “ Select automatically ”
  4. 点击 “Custom…” 下拉框，选择相应的代理设备

img

img

QQ20190822-235730.png

截图

  1. 按 command + shift + p （windows 按 Ctrl + shift + p），弹出命令输入框
  2. 输入：screenshot
  3. 如下图选择相应的截图方式：
  • Capture area screenshot：截取某个区域（需要选择某个标签）
  • Capture full size screenshot：截取整个网页
  • Capture node screenshot：截取某个标签节点
  • Capture screenshot：截取当前可视区域

img

集成 Vue.js 开发者工具

  1. 进入官网：https://cn.vuejs.org/
  2. 选择 “ 生态系统 ” 菜单下的 “ Devtools ”
  3. 下载源码后解压
  4. 在终端切换到解压后的文件目录
  5. 输入打包命令（需安装webpack）：cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
  6. 打开Chrome，输入网址：chrome://extensions/
  7. 点击按钮 “ 加载已解压的扩展程序 ”
  8. 选择 vue-devtools 目录下的 shell/chrome 即可

img

img

QQ20190823-002907.png

img

img

–hide-modules
6. 打开Chrome，输入网址：chrome://extensions/
7. 点击按钮 “ 加载已解压的扩展程序 ”
8. 选择 vue-devtools 目录下的 shell/chrome 即可

如果想要和我交流，就关注我的微信公众号：梓栋Code

梓栋Code
关注
  • 12
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue调试工具vue-devtools安装及使用方法
12-12
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载： git clone https://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install 3.修改manifest.json文件 把”persistent”:false改成true  4.编译代码 npm run build 5.扩展Chrome插件 Chrome浏览器 >  更多
vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
安装Vue Devtools 很简单，只需在谷歌浏览器的Chrome Web Store中搜索“Vue.js devtools”，然后根据应用使用的Vue版本选择相应的插件进行安装。安装完成后，打开Vue应用程序，Vue Devtools 就会在浏览器的开发者...
新版Microsoft Edge、Chrome浏览器F12开发者工具javascripts(js)代码不显示行号解决！！
q460942340的博客
04-25 6155
新版Microsoft Edge、Chrome浏览器F12开发者工具javascripts(js)代码不显示行号解决！！
Chrome DevTools 常用面板攻略
独泪了无痕
01-13 1613
我们经常用Chrome Dev Tools 来开发调试，但其实只是用了他一点点的功能。Chrome Dev Tools绝对是前端性能优化中性能分析的一把利器，而这个功能因为大家平时也相对较少用到，今天就是想将用 Chrome Dev Tools 进行页面性能分析的技能分享给大家，希望大家能在优化自己项目性能的时候更得心应手。Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。在Chrome菜单中选择 更多工具 > 开发者工具。
Chrome DevTools基本操作和功能介绍
最新发布
工作的日常记录和平凡的生活分享
05-30 1041
Chrome DevTools 是一套内置于 Google Chrome 浏览器中的开发者工具集，它为前端开发者提供了调试网页的强大功能。通过 DevTools，开发者可以进行性能分析、网络状况监控、JavaScript 调试、代码编辑、模拟移动设备测试等。专为开发者设计，用于帮助他们对网站进行调试和分析。其功能涵盖了从查看和修改网页元素，到深入的性能分析和网络通信追踪。
前端常用工具介绍
StartLine_05的博客
09-01 327
Chrom 调试 九大功能面板： 1 Elements元素面板： 检查调整调试页面，调试DOM，调试CSS； 2 NetWork网络面板： 调试请求，了解页面静态资源分布，网页性能检测； 3 Console控制台面板： 调试JavaScript，查看Console log日志，交互式代码调试； 4 Sources源代码资源面板： 调试JavaScript页面源代码，进行断点调试代码； 5 Application应用面板： 查看&调试客户端存储，如Cookie、LocalStorage、session
前端之常用库与框架
qq_597221342的博客
09-10 1283
Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库Fullpage.js— 快速实现全屏滚动特性Typed.js — 打字机效果Waypoints.js — 滚动到某个元素位置时触发一个功能Highlight.js — web 语法高亮Chart.js — 使用 JavaS
笼统的前端
weixin_33910137的博客
02-28 374
原文地址 核心 Core HTML(HTML5) CSS(CSS3) JavaScript jQuery ES6 插件 包管理工具 Package Managers NPM Bower Yarn 前端性能 Front-End Performance WebPagetest PerfBudget CriticalCSS Picturefill 编辑器 Text Editors WebS...
前端小工具
weixin_42246997的博客
06-04 201
小工具 1、button：http://www.bootcss.com/p/buttons/ 2、导航条： 滚动到一定高度隐藏：http://www.bootcss.com/p/headroom.js/ 固定导航条：http://www.bootcss.com/p/stickup/ 3、配色：http://www.bootcss.com/p/websafecolors/ 4、webpa...
Chrome 开发者工具中文手册
04-13
Chrome开发者工具是Google Chrome浏览器内置的一套强大的网页开发和调试工具，它为前端开发者提供了丰富的功能，包括元素检查、网络监控、源代码编辑、性能分析等。这份“Chrome开发者工具中文手册”旨在帮助用户...
DevTools:使用 Chrome 开发者工具说明基本 Javascript 调试的单页应用程序
07-02
用于说明使用 Chrome 开发人员工具进行基本 Javascript 调试的基本单页应用程序。 克隆回购 CD 进入“DevTools”目录 对于开发，运行grunt serve 当你准备好构建你的项目时，运行grunt build 玩得开心！
react Chrome插件开发者工具 react-devtools
06-18
- `panel.html` 和 `main.html` 是React DevTools扩展的界面部分，分别代表了在Chrome开发者工具的不同面板显示的内容。 - `manifest.json` 是Chrome扩展程序的重要配置文件，它定义了扩展的元数据、权限和其他设置...
vue3开发者工具vue-devtools
04-25
Chrome DevTools 是 Google Chrome 浏览器内置的一套强大的 Web 开发和调试工具，它允许开发者检查网页的结构、样式、网络请求、性能等各个方面，对网页进行实时修改并查看效果。Vue DevTools 就是基于 Chrome ...
前端开发工具
XINGXUEXX的博客
09-14 538
sublime  webstorm 具有关于js代码的浏览器兼容提示 chrome batarang  ——angular的调试插件 git小乌龟 nodejs  代码压缩和混淆工具 npm 自动安装工具 grunt 代码合并和混淆工具 》》常用 bower 依赖管理工具 （不建议使用） http-server 轻量级server karma 单元测试工具 karma-ja
前端在线工具
mozuncangtianbaxue的博客
09-27 410
转载自：http://www.ofmonkey.com/front/rem
前端工具包
kangle0224的博客
12-02 325
文章目录1.1定时器和清理器1.2 ajax1.3 1.1定时器和清理器 <html> <head> </head&a
前端常用工具
冷残影的博客
09-24 576
请按需搭配   一 nodejs      Node.js是一个Javascript运行环境，实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让...
前端常用工具大全
ben_grf的博客
08-10 2301
保持node热更新插件 supervisor Node Supervisor is used to restart programs when they crash.
web前端开发工具
u010809395的专栏
11-30 355
http://hi.baidu.com/%CE%C4%D6%AA%CF%FE/blog/item/325fe71009cbfc0c213f2ed2.html       不管你做前端开发还是网页重构，前端工具都起着非常重要的作用，这里向大家推荐一些优秀，且被广为用之的前端开发工具。下面主要为大家 推荐的是辅助开发工具和网页调试工具。 1.前端开发必备工具之辅助开发工具篇 在...
开发者工具devtools的原理
09-04
### 回答1： DevTools（开发者工具）是一组工具，可以帮助开发者更轻松地构建、调试和优化网络应用程序。它们可以帮助开发者更快地识别和解决问题。DevTools还可以让开发者实现更多的功能，比如实时预览和检查网页布局，查看网络请求和资源，以及更快地调试 JavaScript 代码。 ### 回答2： 开发者工具（DevTools）是现代浏览器提供的一个功能强大的工具集，用于在开发和调试网页时进行查看、分析和修改。 DevTools的工作原理可以大致分为以下几个步骤： 1. 嵌入到浏览器中：开发者工具是以插件或扩展的形式嵌入到浏览器中的，提供给开发人员使用。用户可以通过浏览器的菜单或快捷键打开开发者工具。 2. 与浏览器建立通信：开发者工具与浏览器建立通信渠道，通过该通道获取当前页面的DOM结构、CSS样式和JavaScript运行情况等信息。 3. 查看页面结构：开发者工具中的“元素”面板可以显示当前页面的DOM结构，开发者可以在该面板中查看并编辑HTML标签、属性和样式。 4. 调试JavaScript代码：开发者工具中的“控制台”面板可以提供一个JavaScript的运行环境，开发者可以在该面板中编写和调试JavaScript代码，查看代码执行的结果和错误信息。 5. 分析网络请求：开发者工具中的“网络”面板可以查看当前页面发送的网络请求，包括请求的URL、请求方法、请求头和响应内容等信息，方便开发者分析页面加载和数据传输的性能问题。 6. 性能分析和优化：开发者工具中的“性能”面板可以用于分析页面的加载性能，并提供诸如JavaScript性能和内存使用情况的详细报告，帮助开发者进行优化。 7. 其他功能：开发者工具还提供了诸如查看和调试页面的样式、查找和替换文本、模拟设备和网络等功能，帮助开发者进行更全面和高效的调试和开发。 总之，开发者工具通过与浏览器建立通信渠道，获取并展示当前页面的各种信息，为开发者提供了丰富的调试和分析功能，帮助他们更好地开发和优化网页。 ### 回答3： 开发者工具（DevTools）是一种集成在浏览器中的工具，用于帮助开发人员在开发和调试网页时进行分析、监控和修改。DevTools的原理涉及以下几个方面。 首先，DevTools与浏览器紧密集成，可以直接访问浏览器中的内部数据结构和功能接口。通过与渲染引擎（如WebKit或Chromium）的通信，DevTools能够获取DOM树结构、CSS样式表、JavaScript堆栈信息等页面相关的数据信息。 其次，DevTools利用浏览器的调试接口（如Chrome的Chrome DevTools Protocol）与浏览器进行通信。这些接口提供了许多底层功能，例如获取网络请求的详细信息、监测性能指标、执行JavaScript代码、模拟用户行为等。DevTools可以通过发送命令和接收响应来与浏览器进行交互，以实现对页面的分析和修改。 还有一些与开发者工具密切相关的技术，例如断点调试和代码审查。开发者工具可以在页面中设置断点，当特定条件满足时，自动中断JavaScript的执行，并提供调试信息和堆栈跟踪，帮助开发人员定位问题。此外，开发者工具还提供了代码审查功能，用于分析和修改页面的HTML、CSS和JavaScript代码。 总之，开发者工具的原理是通过与浏览器内部通信，获取页面的各种数据信息，并提供操作界面和调试功能，以帮助开发人员进行网页开发和调试。开发者工具的实现依赖于浏览器的内部结构和接口，以及相关的调试和审查技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值