标签：工具栏 ctrl 谷歌 实用 箭头 点击 开发者 下图 右键

 

　　谷歌开发者工具已经成为我们必不可少的调试工具，但用了这么久，你是否知道它一些实用的小技巧呢，下面听我娓娓道来

 

　　①：直接用 ctrl + c 复制 HTML

　　　　大家都知道，如果要复制下图箭头里所指的代码，可以双击复制或右键选择copy选项里的copy-element

　　　　

 　　　　但很多人不知道的是，其实可以直接 ctrl + c  （以前都不知道，感觉错过了一个亿）

 

 

　　　②：切换工具栏窗口展示布局的快捷键—— ctrl + shift + D

　　　　  当你想把工具栏变成下图独立窗口展示的时候，如果不使用快捷键，是不是会让你觉得很麻烦

　　　　  

　　　　　 你需要先按 F12，然后在选择下图箭头所指的选项

　　　　　

　　　　　这时用 ctrl + shift + D，就能轻松进行窗口的切换了

 

 

　　　③：使用切 ctrl + [ 和 ctrl + ] 可以让你在工具栏里切换选项卡，而不需要来回点鼠标

　　　　　

 

 

　　　④：通过点击键盘上的 'h' 元素隐藏文字信息

　　　　  如下图，你想截一个没有 '请输入邀请码' 文字的图，按照以前的方法要嘛手动双击删除，要嘛直接在html源文件里手动删除

　　　　　

 

　　　　　现在只需要点击键盘上的 'h' 键，就可以让相应文字隐藏

 

　　

　　　⑤：右键选择 expand recursively 选项

　　　　　有时我们想要一次性打开页面所以元素的节点，如下图红色框的小三角

　　　　　以前可能我们会一个一个去点，现在只需要右键 选择 expand recursively ，无论页面层级多深都能全部打开

　　　　

 

 

　　　⑥：隐藏 network overview

　　　　   通常来说，我们在 network 选项卡里面想要查看的是相关资源加载的信息，而不是下图时间轴部分

　　　　

　　　　　所以我们可以点击下图箭头所指的按钮，关闭时间轴显示，腾出更多空间

　　　　　

 

 

　　　⑦：Shadow editor 阴影编辑器

　　　　　有时当我们给一个元素设置了box-shadow属性，当你想要调整该属性相应值时操作就会变得繁琐

　　　　　比如下图的box-shadow设置了5个值，你无法同时调整，就只能手动一个值一个值的调整，然后一边看效果

　　　　　

 

　　　　　　这时点击下图箭头指的图标换出阴影编辑器就可以方便调试阴影了

　　　　　     

 　　　　　

 　　　　　　

 

　　　　　

 

标签：工具栏,ctrl,谷歌,实用,箭头,点击,开发者,下图,右键
来源： https://www.cnblogs.com/tu-0718/p/10644461.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。