Chrome开发者工具9个调试技巧详解.pdfVIP

Chrome开发者⼯具9个调试技巧详解 对于我们前端开发者来说，Chrome⾃带的开发者⼯具绝对是不可或缺的调试⼯具，我们常⽤的调试⽅法包含⼀些console等，⽽Chrome⾃带的开发者⼯ 具其实很强⼤，下⾯我们来聊聊⼀些你可能不知道的使⽤⽅法。 Scroll Into View 滚动如视图内 在 标签中，查看页⾯元素的时候，如果当前这个元素不在视图内，可以通过这个⽅法让这个元素快速滚⼊视图中。 Elements 操作： 在 标签页中选择⼀个不在视图内的元素 Elements 右击，选择Scrollintoview Copy As Fetch 复制为 Fetch 在 标签下的所有的请求，都可以复制为⼀个完整的 请求的代码。 Network Fetch 操作： 在 标签页中，选中⼀个请求 Network 右击，选择 – Copy Copyasfetch 阻塞请求 在 标签页下，选中⼀个请求，右击该请求，选择 或 ，可以分别阻塞该请求所在 下的所有请求和该请求。 Network Blockrequest domain Blockrequest URL domain ⼿动给元素添加⼀个点击事件监听 在 的时候，有时候需要在元素的点击事件监听函数中，将该点击事件对象打印出来。有个更⽅便的⽅式，是可以直接在 标签页为页⾯元素 debug Elements 添加事件监听事件。 操作： 在 标签页中选中⼀个页⾯元素（选中之后，默认可以通过 变量获取到该元素） Elements $0 在 标签页中，调⽤函数 ，输⼊两个参数，第⼀个是当前元素（ ），第⼆个是事件名（ ） Console monitorEvents $0 click 按 后，当被选中的元素触发了点击事件之后， 标签页会将该点击事件对象打印出来 Enter Console 拖动页⾯元素 在 标签页，你可以拖动任何 元素，改变它在页⾯中的位置。 Elements HTML 操作：如下图。 DOM 断点调试 基本上⼤家都会⽤ 的断点调试，但是应该很多⼈不知道 节点也可以进⾏断点调试。 提供了三种针对 元素的断点调试： JavaScript DOM ChromeDevTools DOM ⼦ 、 和 。 元素改变时 属性改变时 元素被移除时 操作： 在 标签页，选中⼀个元素 Elements 右击，选择 – (或 或 Breakonsubtree modificationsattribute modificationsnode removal ) 截屏 在新版本的 中，提供了⼀个截图的 ，你可以将整个页⾯截图或者截取部分页⾯元素，且截取的图⽚尺⼨跟浏览器当前视图中要截取的内容所占 Chrome API 尺⼨⼀致。截图输出的是 格式的图⽚，会⾃动通过浏览器下载到默认的⽬录下。现在有三种截取的⽅式：