网页css js 抓取助手(程序员最常用的工具利器介绍)

　　网页css js 抓取助手(程序员最常用的工具利器介绍)

　　分为四类：

　　俗话说，工欲善其事，必先利其器。所以作为一个网页开发者，各种提高工作/学习效率的工具当然是必不可少的。给我们的程序员介绍一些最常用的开发工具。

　　一、小助手1.掘金

　　与第一个Infinity New Tab（首屏主题）插件类似，Nuggets是一款笔者认为前端开发者必备的好插件。只需打开新标签页就可以看到每天推荐的优质文章和GitHub项目，让开发者更好地了解技术的发展趋势。

　　

　　2. 云 IDE：Repl.it

　　支持编译运行70多种语言，包括C、Python、JavaScript、Ruby等，无需下载，即刻使用。选择内容右键点击触发。非常方便，节省了打开编译器或搜索在线编译的时间网站。

　　

　　如果有围墙，可以使用：le/22

　　3. 键盘派对：Vimium

　　如果你是 Linux 系统的爱好者，你一定知道 Vim 编辑器。这个 Vimium 插件继承了 vim 编辑器的常用操作。有了它，无论是浏览网页、切换标签页、搜索还是其他任何操作，都可以只用键盘来完成，是不是很hacky？

　　

　　翻页过程中：（按F/ESC键进入/退出键盘模式）

　　4. 排版转换：Markdown Here

　　作为程序员，写技术笔记总结文章当然少不了，但是作者一直习惯Markdown语法，微信不支持，怎么办？有了它，您可以随时将语法更改为兼容微信排版。

　　

　　5. 前端助手：FeHelper.JSON

　　前端开发人员的福音，包括许多有用的小工具。右键单击以快速启动。

　　

　　二、网页信息获取类1. 网页样式：CSSViewer

　　当我们要模仿或设计网页时，需要查看网站的CSS样式。有了它，您可以快速查看当前网页元素的各种 CSS 属性。

　　笔者专门测试了两个插件：另一个类似的插件是code cola，用户可以根据自己的需要进行选择。

　　

　　点击插件图标触发，也可以设置快捷键

　　2. 网页标尺：尺寸

　　在网页上，我们经常需要测量页面上元素的大小。我们应该做什么？使用他。

　　笔者专门测试了两个插件： 另一个类似的插件是Page Ruler，用户可以根据自己的需要进行选择。

　　

　　

　　点击插件图标触发，也可以设置快捷键

　　3. 网页取色：ColorZilla

　　这个ColorZilla插件不仅弥补了之前CSSViewer插件无法选取图片的颜色，它还可以选取网页上任何元素的颜色。

　　对比一下ColorZilla、Eye Droppe和ColorPick Eyedropper的测试：第一个最方便，第二个最小，第三个最强大。作者推荐第一段。

　　4. 网页元素位置：农药

　　突出显示每个元素在页面上的位置，不同的线条颜色可以很好地识别父子元素和兄弟元素之间的关系。

　　

　　5. 网络爬虫辅助：Xpath Helper

　　这是一个网络爬虫的解析工具。它可以轻松获取HTML元素的xPath，避免了搜索html源代码定位一些id和class找到对应的位置来解析网页。

　　

　　6. 网络爬虫工具：Spider

　　插件名称为Spider——一款智能网页抓取工具。这是一款点击式插件，可以一键抓取网页结构化数据，生成JSON和CSV文件。无需编程经验，轻松抓取批量网站内容需求：如产品介绍、新闻标题、表格中的行列数据……有了它，你可以减少整理数据后的时间复制和粘贴。

　　

　　7. Web 开发工具：Web Developer

　　功能非常强大，主要由以下几部分组成：禁用、Cookies、CSS、表单、图像、信息、杂项、大纲、调整大小、工具、查看源和选项。这里就不一一介绍了。

　　

　　修改完成后刷新页面即可生效。我认为它可以取代仅对 cookie 进行操作的 EditThisCookie 插件。

　　8. 网站 技术分析：WhatRuns

　　单击以查找您访问的 网站 上涉及的任何技术，检测技术更改并接收通知。

　　

　　虽然可以看懂网站的源码，但是效率不高，可能会漏掉一些技巧

　　三、网页调试类1.插件版邮递员：Talend API Tester

　　Talend API Tester 插件是一个类似于 Postman 的 api 接口测试工具，可以轻松测试 HTTP 和 REST API。与Postman相比，Talend API Tester无需安装本地客户端，即装即用，占用空间小，功能强大。

　　

　　2. 网络代理：Proxy Switchy Omega

　　Proxy Switchy Omega插件用于代理一些国内无法访问的网站。支持多种模式，切换方便，规则编写简单，支持PAC、Switchy和AutoProxy列表。O|>|O

　　相关设置可以参考：

　　3. 多终端模拟：User Agent

　　Chrome 插件的 User Agent Switcher 可以将 Chrome 浏览器伪装成多种不同浏览器发送请求页面，让您轻松测试不同端页面之间的差异，避免安装和启动多个浏览器的麻烦。

　　

　　其实Chrome浏览器也自带这个功能：开发者工具-->点击界面中的三个点-->更多工具-->网络条件-->取消勾选自动选择

　　4. IE核心操作：IE Tab

　　与上面的User Agent不同，IE Tab用IE内核实现了chrome选项卡中网页的正常显示，不仅方便开发和测试，还可以解决各种网银控件在chrome中无法使用的问题.

　　

　　5. 调试 vue：Vue.js DevTools

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

　　

　　Vue 是数据驱动的，在开发和调试的时候查看 DOM 结构是解析不出来的。所以你需要使用工具

　　6. 调试 React：React 开发人员

　　React Developer Tools 是由 facebook 开发的一个有用的 Chrome 浏览器扩展。通过它，我们可以查看应用程序的 React 组件层次结构，而不是更神秘的浏览器 DOM 表示。

　　

　　7. 调试角度：AngularJS Batarang

　　angularjs batarang 是为谷歌浏览器用户创建的angular项目调试插件，与前两款机型类似。

　　四、Github 助手类

　　如果某些插件不能正常使用，可能需要到github设置访问令牌：github—>设置——>开发者设置——>个人访问令牌——>生成新令牌——>检查gist，repo—— >generate 将令牌值复制到插件配置选项中以显示它。

　　1. 文件下载助手：GitZip for github

　　打开GitHub上的项目，双击要下载的文件或文件夹的空白处，然后文件或文件夹前面会出现一个钩子，表示已被选中，并且会出现一个下载按钮浏览器的右下角。点击下载按钮下载对应的文件。

　　

　　避免某个文件/文件夹下载整个仓库慢的尴尬

　　2. 单文件下载助手：增强型GitHub

　　显示 Github 当前仓库的整体大小和每个单独文件的文件大小。还增加了单个文件下载支持，也避免了某个文件整个仓库下载慢的尴尬情况。

　　

　　要使用，去github设置token：github-->Settings-->Developer settings-->Personal access tokens--->Generate new token---> check gist, repo--->将生成的token值复制到插件配置选项 待显示。

　　3. 浮动快速预览：GitHub Hovercard

　　该插件为我们提供了鼠标悬停预览功能。每次查看其他个人信息、项目信息、问题信息时，都需要进入相关页面查看信息。国内访问github不快，所以很方便。

　　

　　4. 显示文件树：Octotree

　　Octotree 插件可以让你像你的电脑文件夹一样在 GitHub 上快速浏览和搜索关键代码。由于国内访问github的速度不快，加载所有页面需要更多时间，非常方便。

　　

　　5. 模拟 IDE：Sourcegraph

　　Sourcegraph 是一个 Chrome 扩展，它可以为 Github 上的代码添加即时文档和类型提示，并为每个标识符添加一个指向定义的链接。它允许您像浏览良好的 IDE 代码一样浏览源代码。

　　

　　6. 浏览码工具：Octohint

　　功能比上面的Sourcegraph弱，但是加载速度更快。可以定位函数文件，高亮选中变量，显示变量类型等。

　　

　　7.工作量：等距贡献

　　它可以将你每天贡献的数量（可以理解为向GitHub提交的数量）转换成不同颜色的三维直方图，并给出你自己的统计数据。

　　

　　结束语

　　插件章节写了三章，近万字。插件都是作者这几年在使用过程中积累的。他们在工作和生活中都非常有帮助。有些零件以前没有使用过。我什至不知道如何非常方便地使用它。在编写Chrome插件文章的过程中，体会到了各种插件的强大。删除并整理了具有重复功能的插件。如果你觉得本章对你有帮助，请点赞/关注/转发到这里，以后会继续更新。当然，如果你觉得有更好的扩展需要推荐，请在下方留言给作者O|^|O。