文档章节

你可能不知道的8个谷歌开发者工具实用小技巧

o
 osc_gu9d45li
发布于 2019/04/22 13:46
字数 790
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

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

 

  ①:直接用 ctrl + c 复制 HTML

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

    

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

 

 

   ②:切换工具栏窗口展示布局的快捷键—— ctrl + shift + D(根据谷歌版本不同,按此快捷键,有些是工具栏左右切换)

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

      

      你需要先按 F12(windows下的 ctrl+shift+i 快捷键等同于直接按F12),然后在选择下图箭头所指的选项

       

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

 

 

 

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

     

 

 

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

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

     

 

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

 

  

   ⑤:右键选择 expand recursively 选项

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

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

    

 

 

   ⑥:隐藏 network overview

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

    

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

     

 

 

   ⑦:Shadow editor 阴影编辑器

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

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

     

 

      此时点击下图箭头所指图标换出阴影编辑器就可以实时查看调试阴影效果了

          

      

       

 

 

   :查看显示页面哪些地方被 repaint(重绘)

    下面截图右边为-设置页面发生重绘的操作步骤(如箭头所示)

    下面截图左边为-当页面发生重绘时,用绿色高亮显示重绘区域

    

    

    

  补充:下面是我之前单独写的谷歌开发者工具小技巧

      ①:chrome谷歌开发者工具(hover时候的css样式怎么在浏览器调试)

            ②:chrome谷歌浏览器开发者工具-网络带宽控制

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

unity的UGUI之中锚点(Anchors)和中心点(Pivot)、Shift和Alt键功能

在UGUI的控件属性之中,最上方的Rect Transform一栏可以看到锚点和中心点: 锚点Anchors 控件用于定位自身的基准点 可以点击左上角的方框,在其中选择锚点的不同方式: 注意图中,黄色的小点...

路过暴风
今天
7
0
如何将div放置在其容器的底部? - How can I position my div at the bottom of its container?

问题: Given the following HTML: 鉴于以下HTML: <div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div> I would like #cop......

富含淀粉
今天
10
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
今天
16
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
今天
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
54
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部