loading

Chrome Devtools


Chrome Devtools 使用技巧

1.网页可编辑

(1)document.designMode = ‘on’
(2)打开任何网站,在网址栏输入:可手机端
javascdy.setAttribute(‘contentEditable’,’true’);

2.chrome 网页全屏、元素截图

(1)移动端 点击右上角三个点 里面的full即可全屏截图
(2)pc端 打开devtools ctrl+shift+p 打开命令行 输入full即可
(3) 截图单个元素 选择一个元素,MAC下按cmd+shift+p、windows下按ctrl+shift+p来打开命令菜单,然后输入Capture node screenshot

3.条件断点

(1)在断点的地方右键,选择“Edit breakpoint”就可以写上你想出现调试的条件表达式
(2)在sources面板 现在要断点的代码 ctrl+shift+e 在控制台运行当前选中的代码片段

4.将修改后的CSS保存到文件

(1)点击你编辑的CSS文件的名称,进入到Sources面板,你会发现你的修改已经在里面了。然后你可以对你实时的编辑进行保存。
这个修改不适用于添加的新选择器,也不适用于element.style属性,仅仅适用于原有选择器。

5.轻松获取某个审查元素的引用


(1)打开控制台,在 Elements 界面下,对着某个 dom 标签点击右键,选择 Store as global variable。

6.创建并钉住一个动态表达式

7.禁用缓存和保存日志

(1)缓存有时候会造成很多难以排查的 bug,为了排除这个因素,你可以勾选Network 界面下的 Disable cache 选项(它只在 DevTools 窗口打开时生效)。

8.Chrome Workspace

(1) 在sources面板中, 通过 Workspace,你可以把本地服务器的资源映射为硬盘上的文件,实现调试 JS 和 CSS 的同时自动保存文件,比如 Elements 面板中的样式变更会自动保存到文件中。


文章作者:Jing Hong
版权声明:本博客所有文章除特別声明外,均采用CC BY 4.0许可协议。转载请注明来源Jing Hong!
评论
 上一篇
JS中Buffer数据详解JS中Buffer数据详解
元数据处理序言随着WebSocket、WebAudio、Ajax2等广泛应用,前端方面只要是处理大数据或者想提高数据处理性能,那一定是少不了 ArrayBuffer对象 同时在浏览器当中处理二进制数据的需求也在不断的增加,有时需要字节数组、
2019-09-16
下一篇 
AjaxAjax
什么是Ajax? Ajax是一种可以与服务器交换数据并更新部分页面内容,同时可以在不让整个网页重新加载的情况下更新网页的一种技术 Ajax请求过程:1:创建一个异步对象var xmlHttp = new XMLHttpRequest();
2019-08-27
  目录