你所不知道的10个“Chrome开发者工具”使用技巧
2015-12-10 14:35:09 | 来源:玩转帮会 | 投稿:佚名 | 编辑:小柯

原标题:你所不知道的10个“Chrome开发者工具”使用技巧

  今天给大家分享一些使用“Chrome开发者工具”的小技巧。包括调试,优化页面渲染速度等。希望能提升Web开发人员的工作效率。

  1,打开Shadow DOM显示

  浏览器对例如Video、Password等组件进行了封装,无法查看到组件的详细代码,不利于调试。幸好,通过配置能够在元素标签器中显示被隐藏的组件代码。

  实现:Settings→General→Elements→ShowuseragentshadowDOM

  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内存泄露

  1,打开开发者工具并且切换到Profiles面板里;

  2,在页面执行一个能引起内存泄露的操作;

  3,点击“Take Snapshot”来执行一个堆快照;

  4,重复执行步骤 2 和步骤 3 三次;

  5,选择最后一个堆快照;

  6,将过滤器从“所有对象”改为“快照 1 和 2 之间的对象”;

  现在应该已经可以看到一组新的泄露对象的集合,选择其中的一个然后查看是什么导致的内存泄露。

  5,强制改变元素状态

  实现:

  • Elements面板右侧Styles标签→ToggleElementState
  • Elements面板左侧右击→Forceelementstate

  6,快速查找文件&搜索特定字符串

  实现:Sources面板下Ctrl+P(Cmd+Pformac)

  开发者工具支持在源代码中搜索特定的字符串的功能,这种搜索方式不但能区分大小写,还支持正则表达式。

  实现:Sources面板下Ctrl+Shift+F(Cmd+Shift+Fformac)

  7,多列内容选择&匹配相同选项

  实现:

  多列内容选择:按住Alt键,当鼠标箭头变为“+”号后,点击鼠标

  匹配相同选项:选中需要匹配的元素,快捷键Ctrl+D(Cmd+Dformac)

  8,改变颜色模式&自定义调色板

  开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色。

  实现:

  改变颜色模式:Shift+点击鼠标

  自定义调色板:点击样式区域颜色前面的小方块

  9,设备模式&移动仿真

  开发者工具能够模拟不同移动设备,快速测试移动端的用户体验,解决调试困难的问题。

  • 通过模拟不同的屏幕大小和分辨率来测试响应式的设计效果, 也可以模拟Retina 屏幕;
  • 使用网络模拟器来评估你的站点的性能,并且不会影响到其他选项;
  • 可视化并审查 CSS 样式;
  • 准确模拟设备输入,比如触控事件、地理位置以及设备屏幕朝向。

  设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计,甚至可以更改你的地理位置。

  实现:Esc键→Emulation→Enableemulation→Sensors

  10,Workspace编辑本地文件

  Workspace把开发者工具变成了一个真正的IDE。将Sources选项卡中的文件和本地项目中的文件进行匹配,直接编辑和保存,不必复制/粘贴到编辑器。

  实现:Source左侧面板下右击→AddFoldertoworksapce

tags:

上一篇  下一篇

相关:

PHP7终于发布:开发者会选择PHP7吗?

  大家可以通过阅读本文,学习关于PHP7.0的五个方面的内容:PHP7.0简介、主要新特性、过去几周关于程序员

常用Git命令清单

  我每天使用 Git ,但是很多命令记不住。   一般来说,日常使用只要记住下图6个命令,就可以了。但是

纯干货技术贴,您在网上看不到的实战经验,请转发留存学习

天朝乙未年十月二十八日寅时,吾辗转难眠,故群内闲扯!韭菜哥问:有没睡的没有?A君答:嗯,我在看股票教程

毒虫拒绝受检 竟加速冲撞警车

拒绝受检,毒虫竟冲撞警车。(陈萤萱翻摄) 警车前车大樑及水箱毁坏。(陈萤萱翻摄) 警方当场在车内起

关于考核学校安全工作及评估临沂平安和谐校园的通知

各县区教育(体)局,临沂高新技术产业开发区教育局,临沂经济技术开发区教育局,临沂临港经济开发区教育体育

关于做好第四届京交会有关工作的通知

关于做好第四届京交会有关工作的通知各市商务局:第四届中国(北京)国际服务贸易交易会(以下简称京交会)

关于组织参加第四届中国(上海)国际技术进出口交易会的通知

各市商务局:由商务部、科技部、知识产权局、上海市人民政府共同举办的第四届中国(上海)国际技术进出口交

关于在国核电站运行服务技术有限公司等5家单位中开展民用核安全设备无损检验人员考核中心选定工作的通知

国核电站运行服务技术有限公司,中核武汉核电运行技术股份有限公司,中广核检测技术有限公司,中国核动力研

付费12.10鹰氏技术讲堂——江恩角度线

第70篇订阅文章Sayings:#鹰氏操盘学#秉承技术最简单最实用精神,一直追求卓越。鹰家军的精神就是一个“打”

在民族工作部门工作的汉族人,对回族问题的看法?(转载)

  首先,我是一个汉族,另外,还有一个身份,就是我是一个在民族工作部门工作的汉族,呵,这就知道两个身

站长推荐: