前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试,优化页面渲染速度等。希望能提升Web开发人员的工作效率。
1,打开Shadow DOM显示
浏览器对例如Video、Password等组件进行了封装,无法查看到组件的详细代码,不利于调试。幸好,通过配置能够在元素标签器中显示被隐藏的组件代码。
实现:Settings → General → Elements → Show user agent shadow DOM
2,在控制台快速选择元素
在Chrome Dev Tools 控制台中还可以通过$变量来选择DOM元素:
- $:Chrome控制台中原生支持类jQuery的选择器。用$加上熟悉的css选择器就能选择DOM节点。
- $0 ~ $4:最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推,$1返回的是上上次点选的DOM节点。最多可以保存5个,如果不满5个,则返回undefined。
3,多行插入符编辑内容
在Sources编辑框中,按住Ctrl(Cmd for Mac),在要编辑的地方点击鼠标,可以设置多个插入符。按下Ctrl + U 撤销编辑,快速输入,快速删除。
4,使用”3步快照”技术来找出JavaScript内存泄露
- 打开开发者工具并且切换到Profiles面板里;
- 在页面执行一个能引起内存泄露的操作;
- 点击“Take Snapshot”来执行一个堆快照;
- 重复执行步骤 2 和步骤 3 三次;
- 选择最后一个堆快照;
- 将过滤器从“所有对象”改为“快照 1 和 2 之间的对象”;
现在应该已经可以看到一组新的泄露对象的集合,选择其中的一个然后查看是什么导致的内存泄露。
5,强制改变元素状态
实现:
- Elements面板右侧Styles标签 → Toggle Element State
- Elements面板左侧右击 → Force element state
6,快速查找文件&搜索特定字符串
实现:Sources面板下 Ctrl+P(Cmd+P for mac)
开发者工具支持在源代码中搜索特定的字符串的功能,这种搜索方式不但能区分大小写,还支持正则表达式。
实现:Sources面板下 Ctrl + Shift + F(Cmd + Shift + F for mac)
7,多列内容选择&匹配相同选项
实现:
- 多列内容选择:按住Alt键,当鼠标箭头变为“+”号后,点击鼠标
- 匹配相同选项:选中需要匹配的元素,快捷键Ctrl + D(Cmd + D for mac)
8,改变颜色模式&自定义调色板
开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色。
实现:
- 改变颜色模式:Shift + 点击鼠标
- 自定义调色板:点击样式区域颜色前面的小方块
9,设备模式&移动仿真
开发者工具能够模拟不同移动设备,快速测试移动端的用户体验,解决调试困难的问题。
- 通过模拟不同的屏幕大小和分辨率来测试响应式的设计效果, 也可以模拟Retina 屏幕;
- 使用网络模拟器来评估你的站点的性能,并且不会影响到其他选项;
- 可视化并审查 CSS 样式;
- 准确模拟设备输入,比如触控事件、地理位置以及设备屏幕朝向。
设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计,甚至可以更改你的地理位置。
实现:Esc键 → Emulation → Enable emulation → Sensors
10,Workspace编辑本地文件
Workspace把开发者工具变成了一个真正的IDE。将Sources选项卡中的文件和本地项目中的文件进行匹配,直接编辑和保存,不必复制/粘贴到编辑器。
实现:Source左侧面板下右击 → Add Folder to worksapce
转载于:https://www.cnblogs.com/jeffjoy/p/5297433.html
前端调试效率低?试试这10个“Chrome开发者工具”使用技巧相关推荐
- 一个前端开发人员多年苦心搜集的Chrome开发者工具使用技巧
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- 用Chrome开发者工具调试一切
自Google发布Chrome浏览器以来,其附带的Chrome开发者工具就深受开发者们的喜爱,现在人们不仅仅用它来调试Web前端页面,还将它扩展用来调试移动应用和服务端应用.在错误报告平台Bugsna ...
- 在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
- nodejs --inspect-brk结合Chrome开发者工具的调试
命令行 node --inspect-brk 启动nodejs应用: 然后打开Chrome,在地址栏里输入chrome://inspect,点击inspect按钮: 就可以在Chrome开发者工具里调 ...
- 如何使用Chrome开发者工具调试web socket应用
使用Chrome开发者工具,web socket应用的调试显得异常方便. 打开Chrome开发者工具,切换到network标签页,选择Filter,根据WS过滤, 刷新我们的web socket应用, ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 传送门 转载于:https://www.cnblogs.com/momozjm/p/9389912.html
- 使用chrome开发者工具调试JavaScript代码的三种常用方法
对 JS 程序的调试,除了在 JS 程序中使用 alert().console.log() 方法跟踪和调试代码外,开发人员也会经常使用一些调试工具.最常用的 JS 调试工具就是一些主流的浏览器的调试工 ...
- 提升开发效率的 Chrome 开发者工具快捷键参考
文章出自个人博客 https://knightyun.github.io/2020/05/23/tools-devtool-shortcut,转载请申明 本文只介绍 Chrome 一些主要和常用的快捷 ...
- 微信小程序体验版数据加载不了,打开调试模式下才行(在微信开发者工具上也能加载数据)
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名 注:域名已经备案.https ...
最新文章
- 《智源社区周刊:预训练模型》第2期:Facebook用“预微调”改进预训练性能、再议GPT-3中的东方主义偏见...
- iOS- UITableView could not hold the selected row after reload
- java音乐登陆界面_第四篇——Spring音乐登录界面设计及实现(C#)
- GDI+ 学习记录(23): 输出文本
- hdu 6015 Gameia(树上博弈)
- vba窗体 点击增加减少_EXCEL之VBA-窗体实例多页控件的基础应用
- 牛逼!用文言文来编程,97 年 CMU 本科生火遍全网!
- Structs个人适用知识整理
- 泛函分析 04.05 有界线性算子 - 闭算子与闭图像定理
- android手机 联系人迁移,有什么软件能快速将手机通讯录的联系人传到另一个手机上...
- 性能测试流程指南和工具推荐
- 英语面试自我介绍java_java面试英语自我介绍
- centos7.4 编译 找不到 -lGL
- leetcode1438
- php自学建议_php自学提升进阶路线
- steam无法连接至计算机,win10系统打开steam提示无法连接至steam网络的图文方法
- w7旗舰版的计算机管理,win7旗舰版系统获取administrator权限的方法
- 推荐很nice英文文献翻译软件
- 微信公众号平台的现状及发展前景的分析(十八)
- [转]微服务与Docker