Chrome 开发工具 15 个必须知道的技巧(动图).pdfVIP

Chrome 开发⼯具 15 个必须知道的技巧(动图) 在Web开发者中，Google Chrome是使⽤最⼴泛的浏览器。六周⼀次的发布周期和⼀套 强⼤的不断扩⼤开发功 ，使其成为了web开发者必备的⼯具。你可 已经熟悉了它 的部分功 ，如使⽤console和debugger在线编辑CSS 。在这篇⽂章中，我们将分享15 个有助于改进你的开发流程的技巧。 ⼀、快速切换⽂件 如果你使⽤过sublime text ，那么你可 不习惯没有Go to anything这个功 的覆盖。你 会很⾼兴听到chrome开发者功 也有这个功 ，当DevTools被打开的时候，按 Ctrl+P （在 mac 是cmd+ ）,就 快速搜寻和打开你项⽬的⽂件。 ⼆、在源代码中搜索 如果你希望在源代码中搜索要怎么办呢？在页⾯已经加载的⽂件中搜寻⼀个特定的字 符串，快捷键是Ctrl + Shift + F (Cmd + O t + F) ，这种搜寻⽅式还⽀持正则表达式哦。 三、快速 转到指定⾏ 在Sources标签中打开⼀个⽂件之后，在Windows和Linux 中，按Ctrl + G ，(Cmd + L) ， 然后输⼊⾏号，DevTools就会允许你跳转到⽂件中的任意⼀⾏。 另外⼀种⽅式是按Ctrl + O ，输⼊:和⾏数，⽽不⽤去寻找⼀个⽂件。 四、在控制台选择元素 DevTools控制台⽀持⼀些变量和函数来选择DOM元素： $()–document.querySelector()的简写，返回第⼀个和css选择器匹配的元素。例 如$(‘div’)返回这个页⾯中第⼀个div元素 $$()–document.querySelectorAll()的简写，返回⼀个和css选择器匹配的元素数 组。 $0-$4–依次返回五个最近你在元素⾯板选择过的DOM元素的历史记录，$0是最 新的记录，以此类推。 想要了解更多控制台命令，戳这⾥：Command Line API 。 五、使⽤多个插⼊符进⾏选择 当编辑⼀个⽂件的时候，你可以按住Ctrl （cmd ），在你要编辑的地⽅点击⿏标，可以 设置多个插⼊符，这样可以⼀次在多个地⽅编辑。 六、保存记录 勾选在Console标签下的保存记录选项，你可以使DevTools的console继续保存记录⽽不 会在每个页⾯加载之后清除记录。当你想要研究在页⾯还没加载完之前出现的bug 时，这会是⼀个很⽅便的⽅法。 七、优质打印 Chrome’s Develo er Tools有内建的美化代码，可以返回⼀段最⼩化且格式易读的代 码。Pretty Print的按钮在Sources标签的左下⾓。 ⼋、设备模式 对于开发移动友好页⾯，DevTools包含了⼀个⾮常强⼤的模式，这个⾕歌视频介绍了 其主要特点，如调整屏幕⼤⼩、触摸仿真和模拟糟糕的⽹络连接。 查看视频:htt s://dn- linuxcn .qbox .me/static/video/DevBytes%20%20Chrome%20DevTools%20Device%20Mode .m 4 九、设备传感仿真 设备模式的另⼀个很酷的功 是模拟移动设备的传感器，例如触摸屏幕和加速计。你 甚⾄可以恶搞你的地理位置。这个功 位于元素标签的底部，点击“show drawer”按 钮，就可看见 Emulation标签 – Sensors. ⼗、颜⾊选择器 当在样式编辑中选择了⼀个颜⾊属性时，你可以点击颜⾊预览，就会弹出⼀个颜⾊选 择器。当选择器开启时，如果你停留在页⾯，⿏标指针会变成⼀个放⼤镜，让你去选 择像素精度的颜⾊。 ⼗⼀、强制改变元素状态 DevTools有⼀个可以模拟CSS状态的功 ，例如元素的hover和focus,可以很容易的改 变元素样式。在CSS编辑器中可以利⽤这个功 ⼗⼆、可视化的DOM 阴影 Web浏览器在构建如⽂本框、按钮和输⼊框⼀类元素时，其它基本元素的视图是隐藏 的。不过，你可以在Settings - General 中切换成Show user agent shadow DOM ，这样 就会在元素标签页中显⽰被隐藏的代码。甚⾄还 单独设计他们的样式，这给你了很 ⼤的控制权。 ⼗三、选择下⼀个匹配项 当在Sources标签下编辑⽂件时，按下Ctrl + D (Cmd + D) ，当前选中的单词的下⼀个 匹配也会被选中，有利于你同时对它们进⾏编辑。 ⼗四、改变颜⾊格式 在颜⾊预览功 使⽤快捷键Shift