文章分类 - Chrome开发者工具使用指南
Chrome开发者工具使用指南
摘要：前端开发静态文件时，浏览器访问会缓存样式、图片、js等，怎么快速更新缓存呢？ 以下方法特别适合只想清除某个网页的缓存，而不想清除全部浏览器缓存可以采用以下方法。 强制刷新 同时按住ctrl+f5或ctrl+shift+r（Mac）进行访问页面强制刷新，一般可以解决95%以上的缓存问题。 F12键打开
阅读全文
摘要：通过以下方式打开Coverage选项卡，这个可以查看当前页面对css和js的使用覆盖率。 点击左上角按钮开始记录： 如上图可以单纯查看css还是js，或者都查看。选中单个文件，还可以查看具体是哪些代码或者css没有使用到。 记录期间，我们做各种操作，都会影响到这个使用覆盖率的变动。对于现在常用的单页
阅读全文
摘要：在元素面板选中元素，右侧的Event Listeners会显示该元素上的事件。 如果勾选了Ancestors（祖先），那么会展示祖先节点的事件，通常不需要勾选这个。 点击事件右侧的链接可以跳转到附加事件的代码，通常一些js框架或库（比如jQeury）会将原生DOM事件进行封装，而这会导致我们通过元素
阅读全文
摘要：右键元素面板上的元素，有个Break on的选项，这里可以给页面元素打DOM断点。 从上往下依次是子节点改变时断下，元素属性改变时断下，节点移除时断下。 打下断点后，在左侧会有断点标识，右侧的DOM Breakpoints也会有相应的显示。 点击DOM Breakpoints的相应DOM断点，元素面
阅读全文
摘要：在元素面板上选中一个元素后，发现后面总是会出现一个== $0的提示。 此时在控制台输入$0，就可以获取到该元素。 通过这种方式，即使对于那些没有class和id的元素，我们也可以在控制台快速获取并使用。 要是想在控制台调用多个这样的元素呢？ 选中元素，右键，选择选项：Store as global
阅读全文
摘要：Console面板上面有个名为Javascript contexts的选择器，一般值默认为top。 top表示当前执行环境为当前页面，而如果想切换到当前页面各个iframe，就需要进行相应切换。 与此相关的一个功能是，只输出所选运行环境的打印日志： 点击右上角齿轮打开控制台设置，勾选Selected
阅读全文
