注册
登录
| 关键词： 开发者 工具 一个 选择 面板 文件 多行 元素 颜色 页面 |
作为一名Web开发人员，想必你一定听说过Chrome开发者工具了。想象一下，你正在浏览一个很酷炫的页面，里面的色彩，字体，动画，UI交 互，页面打开速度等等都让你惊叹不已，赞不绝口。你在惊叹之余，是不是也想了解下Web开发人员制作该页面的思路呢；或者你自己已经做好了一个页面，但是 不知道怎么回事，一段JavaScript代码就是不能执行；页面在向下滚动的时候，感觉像是在播放ppt，卡顿感很强；有了“Chrome开发者工具” 这个神器，一切问题都能解决。
“Chrome开发者工具”是一个嵌入到Google Chrome浏览器中，集网页制作和调试为一体的工具，有了它，Web开发人员就能够深入地进入到浏览器和网页应用程序的内部去查看页面布局，调试一段JavaScript代码，并且优化页面的渲染速度。 “工欲善其事，必先利其器”，既然我们已经知道了“Chrome开发者工具”是一个很有用且功能很全的工具，那么我们平时在使用它的时候，有哪些 功能是我们平时忽略的呢，这里给大家分享一些我在平时使用“Chrome开发者工具”的一些小技巧，希望能对Web开发人员的工作效率的提升有所帮助。 1可视化Shadow-Dom 什么是Shadow-Dom？ Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。它的最大的用处在于隔离外部环境用于封装组件。 Web浏览器在构建例如<video>、<input type=”range”/>、< input type=”password”/>标签的时候，在Elements面板下看到的也只是基本的元素，其他的元素都被隐藏了。不过借助 Chrome开发者工具能够在元素标签页中显示被隐藏的代码，甚至能够通过例如“::slider-thumb”这样的伪类来定义样式。 实现：Settings → General → Elements → Show user agent shadow DOM
2在控制台选择元素 Console面板支持变量来选择DOM元素： 1. Chrome控制台中原生支持类jQuery的选择器。 用$加上熟悉的css选择器就能选择DOM节点。 2. $0~$4：最近你选择过的5个DOM节点。 $0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。 3多行插入符编辑内容 在编辑一个文件的时候，还在每行逐一地编写重复的代码？试试开发者工具的“多行插入”的功能。 实现：按住Ctrl（Cmd for Mac），在要编辑的地方点击鼠标，可以设置多个插入符。按下Ctrl + U可以撤销编辑
4使用”3步快照”技术来找出JavaScript内存泄露
5强制改变元素状态 有时我们在写css的时候，需要用到一些伪类，例如鼠标悬浮效果 :hover或者已经访问过链接的状态 :visited， 开发者工具能够模拟出这样的状态。 实现：
6快速查找文件&搜索特定字符串 当Sources面板下有很多的文件，有时我们为找到一个文件可能要花费不少的时间，这时我们可以使用开发者工具的“快速查找文件”功能。 实现：Sources面板下 Ctrl+P（Cmd+P for mac）但如果需要在源代码中搜索特定的字符串怎么办呢？别担心，开发者工具也提供了这种功能，这种搜索方式还能区分大小写和支持正则表达式。 实现：Sources面板下 Ctrl + Shift + F（Cmd + Shift + F for mac）
7多列内容选择&匹配相同选项 实现：多列内容选择：按住Alt键，当鼠标箭头变为“+”号后，点击鼠标匹配相同选项：选中需要匹配的元素，快捷键Ctrl + D（Cmd + D for mac）在Sources面板中选择一个资源文件进行编辑时，有时可能需要对多行代码的部分内容进行修改，一行一行去改又太耽误时间，使用开发者工具能够帮助我们节省时间。 8改变颜色模式&自定义调色板 开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色，当点击颜色预览时，会弹出一个颜色选择器，当选择器开启时，鼠标滑到页面鼠标指针会变成一个放大镜，让你去选择像素精度级别的颜色。 实现：改变颜色模式：Shift + 点击鼠标自定义调色板：点击样式区域颜色前面的小方块9设备模式&移动仿真随着移动用户的增长，移动端友好的响应式网站设计变得越来越重要。网页的内容要在不同的设备以及各种网络环境下看起来都不错才行。但是想要测试移动端的体验需要较长时间，并且调试也相当困难。幸运的是开发者工具能够让你在不同的移动设备上看到展示效果。 有了它你就可以：
设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计，甚至可以更改你的地理位置。 实现：Esc键 → Emulation → Enable emulation → Sensors
10workspace编辑本地文件 Workspace是开发者工具的一个强大功能，这使开发者工具变成了一个真正的IDE。Workspace会将Sources选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴到编辑器。 |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
