首页>>技术前沿>>B/S,C/S软件系统开发对于前端开发者来说，ChromeDevTools绝对是不可或缺的调试工具，我们常用的调试方法包含一些console等，而ChromeDevTools 其实很强大，下面来聊聊一些你可能不知道的debug 方法。
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 元素，改变它在页面中的位置。
截屏
在新版本的Chrome 中，提供了一个截图的API，你可以将整个页面截图或者截取部分页面元素，且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致。截图输出的是png 格式的图片，会自动通过浏览器下载到默认的目录下。现在有三种截取的方式：截取整个页面、部分元素 或当前视图。
截取页面部分元素的操作：
CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打开命令菜单
在Elements 标签页，选中要截取的页面元素
选择 Capture node screenshot
缓存上一步操作的结果
在ChromeDevTools 上运行JavaScript 表达式的时候，可以使用$_ 来获取到上一步操作的返回值
Overrides 重写
在ChromeDevTools上调试css 或JavaScript时，修改的属性值在重新刷新页面时，所有的修改都会被重置。如果你想把修改的值保存下来，刷新页面的时候不会被重置，那就看看下面这个特性（Overrides）吧。Overrides 默认是关闭的，需要手动开启，开启的步骤如下。
开启的操作：
打开ChromeDevTools 的Sources 标签页
选择Overrides 子标签
选择+Selectfolderforoverrides，来为Overrides 设置一个保存重写属性的目录
版权声明:
1、弈聪软件网站内容中凡注明“来源：XXX（非陕西弈聪网站）”的作品，转载自其它媒体，转载目的在于传递更多信息，其中涉及的网站建设，网站优化，APP开发，微信小程序开发，大数据平台开发，区块链技术开发等软件开发技术细节并不代表本站赞同支持其观点，并不对其真实性负责。对于署名“陕西弈聪”的作品系本站版权所有，任何人转载请署名来源，否则陕西弈聪将追究其相关法律责任。
2、本站内容中未声明为“原创”的内容可能源自其它网站，但并不代表本站支持其观点，对此带来的法律纠纷及其它责任与我方无关。如果此内容侵犯了您的权益，请联系我方进行删除。
企业动态
