当前位置: 首页 > Chrome插件推荐 > 值得推荐的几款WEB前端开发必备谷歌浏览器扩展插件

值得推荐的几款WEB前端开发必备谷歌浏览器扩展插件

Chrome插件推荐
小编的身边有很多IT男,他们大多是从事的就是web前端的开发工作,尽快念书的时候觉得写网页太简单了,现在自己慢慢走上web前端开发的道路。技术男最喜欢对各种技术做研究,能用工具完成的事情绝不用人力。那么这些web前端开发工程师常用的谷歌浏览器插件有哪些呢?今天小编就给各位整理了五款自己在使用的chrome插件

NO1.XPath Helper:chrome爬虫网页解析工具 Chrome插件
Xpath helper插件

XPath Helper可以支持在网页点击元素生成xpath,整个抓取使用了xpath、正则表达式、消息中间件、多线程调度框架(参考)。xpath 是一种结构化网页元素选择器,支持列表和单节点数据获取,他的好处可以支持规整网页数据抓取。
如果我们要查找某一个、或者某一块元素的xpath路径,可以按住shift,并移动到这一块中,上面的框就会显示这个元素的xpath路径,右边则会显示解析出的文本内容,并且我们可以自己改动xpath路径,程序也会自动的显示对应的位置,可以很方便的帮助我们判断我们的xpath语句是否书写正确。是不是很方便呢?程序员就再也不需要通过搜索html源代码,定位一些id去找到对应的位置去解析网页了。

NO2.Vue.js devtools:调试vue.js应用的浏览器扩展 Chrome插件
Vue.js devtools

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。

NO3.React开发者工具-React Developer Tools Chrome插件
React

React Developer Tools是一款由facebook开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome,是对chrome开发工具的React调试工具。React的开发工具是开源Chrome DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构(原名WebKit Web Inspector)。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染,以及他们最终渲染组件。

NO4.网页开发调试工具:JetBrains IDE Support Chrome插件
JB插件

JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。作为web开发人员常用的开发者插件,程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用,比如JetBrains公司发布的一个web开发IDE,webstorm!支持代码提示、补全、定位、与Git集成等等各种功能,已经跟传统强类型语言的开发环境感觉无多大差异。非常好用。大爱。

NO5.JSONView:web开发格式化和高亮插件 Chrome插件
JSONVIEW

Jsonview是目前最热门的一款开发者工具插件,确切的来说jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。

NO6.Emmet LiveStyle:实时高效的CSS编辑器 Chrome插件

Emmet livestyle
Emmet LiveStyle是一款可以提高开发效率的CSS编辑器开发者插件LiveStyle目前不仅仅支持一Chrome浏览器,还支持Safari浏览器,可以实时进行CSS调试插件工具,非常适合前端工程师的使用,用以提供前端工程师的开发效率,同时还可以利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用。

NO7.chrome浏览器hosts代理插件:Host Switch Plus

每个web开发人员都有这样的体会,在程序开发过程中,难免开发、测试、生产环境各种切换,一般我们直接修改系统的 hosts 文件。有什么忘记修改还会平白无故浪费时间。所以我们希望有一款可以方便管理的工具。host switch plus就是这样一款可以是一个可以在不同环境下快速切换 Hosts 的小工具,虽然界面不怎么华丽,但是功能还是很实用的。快速切换 Domain-IP 配置而不需要编辑 Hosts 文件,方便web开发人员在 测试/开发/线上 等环境快速切换;同时顺便支持本地端口的代理设置;并方便的添加、修改、分组(批量开关)的chrome插件

上面的这几款插件,做web开发的是不是非常熟悉呢?不了解如何使用的可以自行百度哦!

相关插件内容推荐

AngularJS Batarang

开发者插件 2020-12-23 23:10:12

angularjs batarang是一款针对谷歌浏览器用户打造的一款增强插件,该插件主要用于开发者进行脚本的编译和调试操作,可以有效地加速开发者的进程,是您调试AngularJS程序的好帮手。

AlloyDesigner - 前端重构开发辅助工具

开发者插件 2019-10-28 14:49:24

AlloyDesigner是来自Tencent AlloyTeam的前端开发工具,其只出现开发阶段的一定时期,可以在制作时期,也可以在开发测试期,旨在提高前端开发的效率,获得更加便捷的开发体验。

Vue.js devtools

开发者插件 2019-02-14 09:50:00

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。有关Vue.js的更多

Page Ruler - chrome屏幕尺子插件

开发者插件 2019-02-22 16:40:30

Page Ruler是一款可以测量Chrome浏览器中网页元素大小尺寸的谷歌浏览器插件。页面尺寸测量工具,前端设计师专用。可以测量页面元素、图片和文本的尺寸、位置。Page Ruler是一款可以快速

WEB前端助手(FeHelper)

开发者插件 2019-01-25 22:37:24

WEB前端助手:FeHelper是一款chrome浏览器插件。包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式化查看、二维码生成器、编码规范检测、栅格规范检测、网页性能检测、页面取

AngularJS Batarang v0.10.9

开发者插件 2020-12-23 22:54:19

angularjs batarang是一款针对谷歌浏览器用户打造的一款增强插件,该插件主要用于开发者进行脚本的编译和调试操作,可以有效地加速开发者的进程,是您调试AngularJS程序的好帮手

推荐十二款Web开发必备的Chrome插件

聚合专题 2021-02-20 12:57:43

之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序。这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流