浏览器DevTools使用技巧
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。
本文作者:正则
作为一名前端开发人员,平时开发中使用最多的就是 Chrome devtools,但可能很多同学像我一样平时用的最多也就 Console、Elements 和 Network 面板了。除了我们常用的一些功能,它还提供了很多强大但我们不太常见的功能,这些功能可以大大提高我们的开发效率。下面我们就来了解一下。
使用Chrome的截图工具
进行网页截图,一般情况我们都使用的是第三方工具,但其实 Chrome 已经为我们提供了截图功能。使用Command+SHIFT+P(MAC)/CTRL+SHIFT+P(Window)打开命令菜单,输入框中输入“capture”会自动联想到截图命令。
Capture area screenshot
自定义截图区域,与常用的截图工具类似
Capture full size screenshot
截取html完整渲染图
Capture node screenshot
截取某个 DOM 节点的渲染图,使用前需要先在 Elements 下选中节点,也可以选中节点后,点击右键选中菜单中的 Capture node screenshot
Capture screenshot
截取浏览器视窗内的区域
flex 调试面板
对使用了 flex 布局的元素,点击 display: flex 右侧的按钮,就会出现 flex 调试面板,可以直观的修改 flex 相关样式,便于进行样式调试。
Console面板相关
$0、$1、$2、$3、$4
$0 是对当前在 Element 面板中选中的 html 节点的引用,$1是对上一次选择节点的引用,以此类推直到$4,通过$的引用可以读取 DOM 节点的一些属性。
$ 和 $$
$ 等价于 document.querySelector()
$$ 等价于 document.querySelectorAll()
$_
$_为对上次输出结果的引用
console.table
console.table 可以将数组或对象以 table 方式展示,同时也可以展示对象属性。console.table 接受两个参数,第一个为要现实的数据,第二个参数为包含列名称的数组。
time 与 timeEnd
console.time 与 console.timeEnd,两个方法配合计算并打印代码执行时间。
在控制台快速发送请求
在平时的接口调试中,对于同一个接口,我们有时需要修改传入参数并重新发送,对于有些请求可以刷新下页面或者重新操作下即可重新发送,如果对于一个大型表单输入参数发送请求并且进行了页面跳转后,还需要再次调试,针对这样的场景,再次去输入表单去重新发送请求显然效率是非常低的,那有什么捷径呢?
在 Chrome 中我们可以进行以下操作:
- 打开 Network 面板,选中 Fetch/XHR;
- 选择要重新发送的请求,单击右键选择 Copy,选中 Copy as fetch;
- 进入 Console 粘贴,修改输入参数并重新发送。
在 Edge 浏览器中除了使用 Chrome 中的方法外,还可以使用 Network Console 进行重新请求,具体操作如下:
- 选择要重新发送的请求,单击右键选择 Edit and Resend;
- 进入 Network Console 面板,修改参数后点击 send 即可发送请求。
使用 Import HAR file / Export HAR file 复现网络请求
在 Network 面板上分别有 Import HAR file 和 Export HAR file 按钮,点击 Export HAR file 按钮会导出har文件,文件中保存了浏览器与服务器交互的一些数据,我们可以在任意浏览器页面中点击 Import HAR file 导入 har 文件复现当时的请求。
使用场景:当在客户环境我们不方便直接访问,假如由于网络问题或传参问题等问题导致接口报错问题时,我们可以通过导出 har 文件,在我们本地复现当时的网络请求状况。
条件断点
当清晰知道要调试的范围,且只调试某指定条件分支下使用,当满足条件时,断点才会生效。
使用方法:在行号处点击 Add Conditional Breakpoint...,即可添加代码行条件断点。
事件断点
如果对代码不熟悉或者在较长的代码逻辑中,只是知道点击触发业务逻辑时,可以考虑事件监听断点。
DOM断点
当 DOM 节点发生变化时添加断点,会定位到修改 DOM 的那行代码。
说明:
- subtree modifications 当前 DOM 子节点有任何变化时触发断点
- attribute modifications 当前 DOM 本身属性有任何变化时触发断点
- node removeal 当前 DOM 节点被移除时触发断点
使用 Snippets 编写代码片段
在平时开发中,常常会有些 JS 代码需要在浏览器中调试,直接在 console 下写会比较麻烦,这时可以使用 Chrome 提供的 Snippets 功能。
使用方法:
- 在 Sources 下选择 Snippets,点击 “New Snippet” 按钮,创建一个新的代码片段;
- 在代码区域输入代码;
- 按下“Command+Enter”或者点击右下方按钮即可执行代码。
此外也可以使用 Snippets 存储一些常用的代码片段,如防抖、节流、正则表达式等代码,这样每次打开 Devtools 都能获取到这些代码,而不用去百度。
Snippets 和 Console 对比
Snippets | Console |
---|---|
跨标签页可用 | 当前标签页可用 |
永久保存,除非手动删除 | 页面重载后清除 |
总结
Chrome DevTools提供了更多强大的功能供我们使用,它们可以大大的提高我们的开发效率。以上只是Chrome DevTools里一小部分使用技巧,更多的使用技巧欢迎大家在评论区补充分享。
浏览器DevTools使用技巧的更多相关文章
- 5个提升Google Chrome浏览器运行速度的技巧
尽管有无数个喜欢Google Chrome 浏览器的理由,其中就包括,Chrome已经够快了,但Google Chrome的内存占用而导致的速度拖累还是广受诟病,这种弊端在windows下尤为明显, ...
- chrome 浏览器的使用技巧
前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...
- 20个Chrome DevTools调试技巧
译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...
- android浏览器开发小技巧集锦(转)
本人和朋友们做了一段时间浏览器,将一些小技巧分享出来,先写一部分,慢慢写,同时也为我们的浏览器打打广告 我们的浏览器将要上线,名叫沙发浏览 1.网页内的右键菜单 public boolean onLo ...
- IE和Firefox浏览器CSS兼容性技巧整理
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...
- 第一期chrome浏览器的小技巧------《提高搜索效率》
!!! 这次的技巧是:利用chrome提供的设置 提高你的搜索效率 !!! 我们经常遇到问题,搜索的时候很不方便 比如你在百度上搜索一个东西的时候正好没有搜到,那么你想找到这个东西的话,很明显要到其他 ...
- Win7系统Chrome浏览器缓存查看技巧介绍(转)
1.Chrome下提供了一个命令chrome://cache,可以查看到保留下来的缓存; 2.但是,当你点击缓存文件,Chrome却并非打开缓存源文件,而是如图所示的二进制编码文件; 3.在Win7系 ...
- Chrome浏览器的使用技巧
查询Chrome浏览器自身的DNS缓存 在浏览器的地址栏输入:chrome://net-internals/#dns 在左侧的菜单栏,点击对应菜单可以查看对应选项的相关内容. 在Chrome浏览器中输 ...
- 模拟用户点击弹出新页面不会被浏览器拦截_javascript技巧
原文:http://www.html5cn.com.cn/article/zxzx/3195.html 相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况:我们换下思路 ...
- 浏览器devtools系列(一)
作为一个web开发人员免不了去和浏览器打交道,前端人员更是如此. 测试人员可能在代码测试的时候容易定位,问题出现在哪里. 不过供桌中常用的可能就是几个,比如前端人员经常看控制面板调试问题,打印后台数据 ...
随机推荐
- 2.Prometheus邮件报警配置
1.安装配置 Alertmanager wget https://github.com/prometheus/alertmanager/releases/download/v0.20.0/alertm ...
- (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
一.注意要点 1:输入字符串的的编码双方保持统一,如:UTF8: 2:HASH计算输出结果 byte[] 数组转String 时,编码要统一,如:转16进制小写字符串.当然也可以转Base64. 3: ...
- androidmanifest.xml 反编译
androidmanifest.xml 反编译 去除更新只修改androidmanifest.xml内容 解压apk文件后得到这个文件androidmanifest.xml windwos安装java ...
- GCC Arm 12.2编译提示 LOAD segment with RWX permissions 警告
使用GCC Arm工具链开发的项目, 在升级到 arm-gnu-toolchain-12.2 之后, 编译出现警告 arm-gnu-toolchain-12.2.mpacbti-bet1-x86_64 ...
- GitHub 供应链安全已支持 Dart 开发者生态
通过 Dart 和 GitHub 团队的共同努力,自 10 月 7 日起,GitHub 的 Advisory Database (安全咨询数据库).Dependency Graph (依赖项关系图) ...
- 编程架构演化史:远古时代,从打孔卡(Punched Card)开始
回想读书时记录到书本里的打孔纸带编程,到初学编程接触到的C语言高级编程,再到C++.Java面向对象语言产生:从面向过程系统设计 到面向对象系统设计:从三层结构到MVC.MVP.MVVM:从主机到虚拟 ...
- day03-2-拓展
满汉楼03 5.拓展_多表查询 前面都是对单表进行操作 思考一个问题:如果多表查询怎么处理?例如,查看账单时,希望现实菜品名称 查询的结果从上图变为下图: 方案一 由多张表组合查询的的结果,我们仍然可 ...
- javascript编程单线程之异步模式Asynchronous
异步模式Asynchronous 不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js 非常重要,没有异步任务单线程的 js 语言 ...
- vue2 解决跨域
vue2.x 解决跨域 通过devServer将接口代理到本地在开发的时候,需要请求同局域网内的接口,发现直接使用http://对方的ip地址/接口路径,会出现类似下图的跨域报错 找到并打开vue.c ...
- day02-HTML02
4.HTML 4.3HTML基本标签 4.3.9表格(table)标签 基本语法: <table border="边框宽度" cellspacing="空隙大小&q ...