10个chrome开发人员必须掌握的技巧和窍门

本篇文章给大家分享10个chrome开发人员必须掌握的技巧和工具。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:chrome开发者工具

1. 模拟慢速网络和慢速设备

我们可能习惯了在城市的网速,那是杠杠的,并不意味网速在中国哪个都一样的,在一些偏远地方,网速依然慢的可怜,所以有时候我们所做的产品是需要考虑网速慢的情况的,那怎么模拟呢?

打开谷个浏览器的performance选项卡,然后单击右上角的齿轮图标就可以看到 NewworkCPU的模拟情况。

1.png

2. 颜色选择器

单击表示颜色的小方块,弹出颜色选择器。

2-1.png

2-2.png

启用颜色选择器后,可以将网页悬停并使用颜色选择器来获取该像素的颜色。

2-3.png

2-4.png

弹出颜色选择器的小方块还有快捷键按住Shift并单击以更改颜色格式。

3. Audits

Audits(审计),这个功能其实一直存在,只不过在chrome 60之后,发生了翻天覆地的变化:引入了Google开源的另外一个项目:LightHouse

Audits主要从5个方面来给网页打分,最终会生成一个report:

4.Pretty Print(显示可读代码)

3.png

我们知道许多网站都对Javascript代码进行了压缩,但这对开发者和学习者来说,读起来很费劲,谷歌提供一个功能给我们,可以更好查看压缩文件。

我们点击下方的大括号{}图标,即可使用Pretty Print功能了

3-2.png

5.快速文件切换器

如果你知道文件名,则不必打开“Sources”选项卡。只需按cmd/ctrl + p,然后输入你想查找的文件名,接下按下回车就 ok 了。

6. 响应模式

我们在桌面和移动设备上开发网站,通常我们倾向于最初的桌面体验。 但是这与越来越多的用户使用移动设备访问网络的趋势相脱离。 为了提高网站的用户体验,我们需要准确地知道网站在移动设备上的效果。 Chrome 开发者工具包里加入了手机模拟器特性,帮助我们测试:

6-1.png

对于大多数人而言,大多数时间只需要通过不同的屏幕尺寸和方向查看他们的网站即可。

6-2.png

7.屏幕截图

1、F12

2、【ctrl+shift+p】

3、输入“capture”

4、选择以下任意

  1. capture full size screenshot”【整个网页】
  2. capture node screenshot”【节点网页】
  3. “capture screenshot”【当前屏幕】

8. Extensions

我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名,以简化其技术(Vue,Angular,React等)的开发。 这是Featured DevTools扩展的列表

9. Coverage

Coverage 是chrome开发者工具的一个新功能,从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行,而哪些js和css是还没有用到的,如图,这是我在打开csdn网页时,所显示的已运行和尚未运行的代码情况。

9.png

如何打开caverage 前提:chrome浏览器的版本必须是59或以上,在ctrl+shift+i快速打开devtools,点击右上角的... More tools 有个Coverage。

那这个新功能有什么作用呢?

如上图所示,最右边显示的是我们加载的css和js文件数量,红色区域表示已运行的代码,而青色表示已加载但未运行的代码。可用来发现页面中尚未用到的js 和 css代码,你可以为用户只提供必要的代码,这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用。

10. 实时跟进新功能

Chrome 的开发工具会不断更新,它会在What's New In DevTools 上发布更新的视频,我们可以时不是去看看,了解一些新出来的功能,这样我们就能实时知道谷歌的一些好用的功能了。

本文转载自:https://segmentfault.com/a/1190000022134641

英文原文:https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9

作者:FelDev

译者:前端小智

更多web开发web前端课程相关知识,请查阅 HTML中文网 !!

以上就是10个chrome开发人员必须掌握的技巧和窍门的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » 头条

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏