小编给大家分享一下前端开发的chrome扩展有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> 1。CSSViewer
这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它的所有CSS属性。您可以通过快捷键在CSSViewer的窗体中轻松复制您选定元素的样式。
也许您会感到奇怪,chrome本身的开发者工具不是已经足够了吗,为什么我还要用它?
其实这个插件比我们浏览器中的开发者工具显示的信息更多也更先进。除了基础的元素的宽度和高度的盒子模型外,还包括了所有已生效的样式及更多信息。
<强> 2。占卜
Auury是由捕杀。io构建的DevTool扩展,用于调试,分析和优化角项目。
Auury在DevTools中提供了丰富的UI,您可以:
查看组件的依赖注入(DI)树图
<李>编辑及修改组件的属性
<李>发射事件
<李>等等…
我个人认为,它在我想要了解组件的变更检测触发器可以沿着组件树向下延伸到多深时很有用。
如果您是角开发人员,并且没有在您的DevTool中使用过占卜,那么这是件很可惜的事情.Augury有着您直接从浏览器调试角应用程序所需的一切,来试试吧。
<强> 3。反应开发工具
这是反应团队开发的很棒的DevTool。
就像占卜一样,反应开发工具提供了一个丰富的UI,我们可以在其中监视反应组件中的事件流。您可以检查反应组件的属性和状态,随意更改属性和状态,并查看所作的变化在组件树中的传递过程。
<强> 4。JSONView
浏览器通常不太擅长显示JSON数据。数据通常以纯黑白的方式密集显示,这使得理解它非常困难,特别是您试图定位一个深度嵌套的属性时。
JSONView格式化和美化JSON数据。它以丰富着色的树状视图显示它们,使得标识属性和值变得更加容易。
<强> 5。图书馆嗅探器
我通常很想知道网页是基于什么框架构建的,或这个站点引用了什么库。
图书馆嗅探器在这方面对我的帮助很大。这个工具可以为你提供网页上的详细信息,无论它是基于类似反应,
角,Vue,苗条的,Wordpress等平台或框架。
<强> 6。Web开发人员
Web开发人员会将工具栏添加到您的浏览器中。这个工具栏包含许多方便的工具,程序员和设计人员都可以在日常工作中使用它们,从而提高工作效率。它的范围从向元素添加轮廓,显示标尺,查找页面上的所有损坏图像到更改页面布的局,操作图片等。
它将这些经常需要的功能添加到默认的DevTools检查器中。
<强> 7。LambdaTest
多浏览器的兼容性一直是一件令网络开发人员苦恼的事情。您的网站在不同的浏览器上的呈现是开发人员一直在考虑的问题。
我们通常选择在我们的机器上安装不同的浏览器,这样我们就可以在上面启动任何浏览器来测试我们的网站。
这个扩展可以为您做所有的事情。它使您可以在台式机和移动设备上使用不同的浏览器截取网页的屏幕截的图,从而为兼容性问题提供了快速而决定性的答案。
<强> 8。ColorPick吸管
ColorPick点眼药器有一个浮动面板,它悬停在网页中的元素上,方显示元素的颜色。单击该元素会将所选元素的颜色复制到剪贴板。这是一个很好的方法,可以加快发现,复制和粘贴颜色所需的时间。
<强> 9。CSSPeeper
