chrome抓取网页插件(web前端开发工程师常用的谷歌浏览器插件有哪些呢？（上）)

　　chrome抓取网页插件(web前端开发工程师常用的谷歌浏览器插件有哪些呢？（上）)

　　编辑身边有很多IT人。他们大多从事Web前端开发。早在学习的时候，就觉得写网页太简单了。现在我正在慢慢走上web前端开发的道路。技术男喜欢研究各种技术，工具可以做的事情不需要人力。那么这些网页前端开发者常用的谷歌浏览器插件有哪些呢？今天整理了五个自己在用的chrome插件。

　　NO1.XPath Helper：chrome爬虫网页分析工具的Chrome插件

　　XPath Helper 可以支持通过单击网页上的元素来生成 xpath。整个爬取使用了xpath、正则表达式、消息中间件、多线程调度框架（参考）。xpath 是一个结构化的网页元素选择器，支持列表和单节点数据获取。其优点是可以支持常规的网页数据爬取。

　　如果我们要查找某个元素或某个元素块的xpath路径，可以按住shift键移动到这个块，上框会显示这个元素的xpath路径，解析后的文本内容会显示在对了，我们可以自己改变xpath路径，程序会自动显示对应的位置，可以帮助我们判断我们的xpath语句是否写对了。方便吗？程序员不再需要搜索html源代码，定位一些id找到对应的位置来解析网页。

　　NO2.Vue.js devtools：用于 vue.js 应用程序的调试浏览器扩展 Chrome 插件

　　Vue.js devtools 是一个开发者浏览器扩展，用于调试基于 google chrome 浏览器的 vue.js 应用程序。做前端开发的IT工程师应该对这个工具比较熟悉，可以边看边栏边看页面边看代码。

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

　　React Developer Tools 是由 facebook 开发的一个有用的 Chrome 浏览器扩展，可通过 Chrome Web Storage 获得。使用 Chrome Devtools 进行调试时，您可以查看应用程序的 React 组件层次结构，而不是更神秘的浏览器 DOM 表示。在chrome中添加react开发者工具，是chrome开发工具的React调试工具。React 的开发工具是 JavaScript 库，可扩展开源 Chrome DevTools 的响应。它允许您在 Chrome 开发人员工具（以前称为 WebKit Web Inspector）中检查 React 组件的层次结构。您将在 Chrome DevTools 响应中收到新标签请求。这表明您的根响应式组件在页面上呈现，并且它们最终呈现组件。

　　NO4.Web开发调试工具：JetBrains IDE Support Chrome插件

　　JetBrains IDE Support 是一个谷歌浏览器插件，支持在浏览器上编译和实时显示和调试。作为Web开发者常用的开发者插件，程序员习惯称其为JB插件。这个调试插件需要配合一些开发工具使用，比如发布的一个web开发IDE，webstorm！支持代码提示、补全、定位、Git集成等多种功能，感觉和传统强类型语言的开发环境没什么区别。很有用。大爱。

　　NO5.JSONView：Web开发格式化高亮插件Chrome插件

　　Jsonview 是目前最流行的开发者工具插件。准确地说，jQuery JSONView 是一个非常有用的格式化和语法高亮 JSON 格式数据查看器 jQuery 插件。查看json数据是神器。

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

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

　　NO7.chrome浏览器主机代理插件：Host Switch Plus

　　每个 Web 开发人员都有这种经验。在程序开发过程中，不可避免地要在开发、测试、生产环境之间切换。一般我们直接修改系统的hosts文件。忘记修改某些东西会无缘无故地浪费时间。所以我们希望有一个易于管理的工具。Host switch plus就是这么一个小工具，可以在不同环境下快速切换Host。虽然界面不是很华丽，但是功能还是很实用的。无需编辑Hosts文件即可快速切换Domain-IP配置，方便web开发者在测试/开发/在线环境中快速切换；同时，顺便支持本地端口的代理设置；并且方便添加、修改和分组（批量切换）Chrome插件。

　　上面的插件对于做web开发的人来说是不是很熟悉？不知道怎么用的可以自行百度！