如何将 Chrome 变成开发利器，微信web开发者工具们在用这些插件

来源：蜘蛛抓取(WebSpider) 时间：2017-03-18 11:09 标签： 微信开发者工具
遍历 Web 浏览器的发展史，有两个非常关键的节点：IE 捆榜到 Windows 系统和 Google Chrome 的发布，IE 捆绑开始了浏览器大范围的推广使用，而 Chrome 则成为浏览器进入一个全新阶段的起点。
2008 年，在 IE、Firefox、Opera 的乱世里现身的 Chrome，简直是 Web 浏览器里的清流，“干净、简单、快速”，之后以其版本号升级般的快速发展，对 Web 标准、程序开发甚至整个互联网行业的推动做出了巨大的贡献。
如今，Chrome 在 Web 浏览器的市场占有率已经是第一，但它的更新还在跟着版本号一样的快速前行……所以，我们今天准备了一期相关的内容——《“一天精通 Chrome 开发”》，作为第 15 期周刊的主题。
本期周刊，将分为控制台与调试技巧、扩展和应用的学习及示例两个部分。好了，开始吧。
Chrome 开发技巧
帮你开启上帝视角，从一个简单的 console.log(); 展开，呈现远不止于此的强大控制台。
2. 开发者工具：你不知道的 Chrome DevTools 系列 by @civerzhu
“Chrome 开发者工具作为 Web 前端开发性能调试的必备工具，连隔壁的产品小哥都知道打开 F12 改一下页面元素的标签代码就能看到页面效果。”
但是它能做的远不止平常用的那么简单，这一个小小的开发工具集成了很多高级的功能，作者这个系列的文章，就是对开发者工具的系统学习。
3. 优化页面性能
Chrome TimeLine 工具可以很好地辅助分析页面的性能瓶颈，提供详细全面的分析数据，为性能优化提供数据依据，以及还包括如 Memery Mode、Screen Shot 等多种多样的技巧，非常强大。
4. 各种奇技增加效率
通过各种扩展，强化浏览器，各种前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高效率的强大扩展；快速获取调试技巧，增加开发效率，这两者对前端开发者尤其是不可或缺的。
看了这么多，要不先试试这个技巧？
data:text/html,
style="width: 100%; height: 100%; border: outline: none" autofocus /&
Apps & Extensions
5. 写一个简单的扩展吧
如何注册成为 Google 开发者、如何开始写 Manifest 文件（browser_action, options_page, permissions, background, chrome_url_overrides, 调试）、如何优化及丰富功能，按这四个步骤，手把手教学。
6. 认真进阶
一个二维码生成器、一个笔记剪辑、一个微博界面改造，非常优秀的学习作品，你也可以写一个。
7. 看看实例，提高一下姿势水平
用了这么多年 Chrome，见过太多奇（tian’ma）奇（xing’kong）怪（hen）怪（zan）的插件和应用了，私货就不跟大家分享了，这里整理出社区里产生的一些扩展应用，很有意思，也值得学习。
知乎改造计划
SegmentFault 升级 by @公子
8. 附加阅读
**这些，你觉得一天可以精通吗？**
（本期完）
# SegmentFault 技术周刊 #
「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。
每周二更新，欢迎「」或者「」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
(1)(7)(3)(15)(2)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'如何将 Chrome 变成开发利器，开发者们在用这些插件 - 简书
如何将 Chrome 变成开发利器，开发者们在用这些插件
Chrome 浏览器具有强大的跨平台能力以及丰富的扩展插件，一直是许多开发者的首要选择。而利用许多 Chrome 插件，开发者们在开发流程中能够极大地提高开发效率。我们就整理了十款开发者常用的 Chrome 插件推荐给大家，相信能够在你的开发中助你一臂之力。1.:帮你发现干货不管你是开发者、设计师还是产品经理，想必每天都需要阅读大量的行业相关文章，这就需要我们浏览大量的互联网站点去寻找我们需要的内容。抛开繁复的筛选成本不说，「比特级」的内容都会压得你喘不过气来掘金为了解决这个问题，开发了掘金 Chrome 插件，掘金 Chrome 插件聚合了国内外优质的互联网站点内容，在节省你的筛选成本的同时，帮你发现好内容。
2.：强大的 API & HTTP 请求调试工具相信 Postman 对于掘金上的各位开发者来说，一定不会陌生，这是一款强大的 API & HTTP 请求调试工具，Postman 不仅可以调试简单的 HTML、CSS 以及脚本等简单的网页基本信息，这款 Chrome 插件甚至还能发送几乎所有的 HTTP 请求，可谓是 Web 开发者的一大利器。
3.：你的网站，用了什么技术栈？作为开发者，对于友商网站所使用的技术栈想必也充满了许多好奇心，有没有工具能够帮你完成这项工作呢？答案就是 Chrome 插件 BuiltWith Technology Profiler，它能够帮你分类呈现当前访问网站的技术栈组成，实乃探索友商之利器。
当然，同类产品中，你也可以使用这一款 Chrome 插件。4.：你的 GitHub 文档库GitHub 现有的目录层级形式，在查看来自不同层级文件夹的文件的时候，显得似乎不是很方便，Octotree 这款 Chrome 插件能够让你通过文档库的方式管理、查看你的 GitHub 仓库，简单直观的同时，也方便你进行文件之间的跳转操作。
5.：属于 GitHub 的 「Alfred」在 GitHub 搜索仓库或者项目的时候，你会怎么做？相信大部分人的步骤都是一样的：在搜索框输入关键字后按回车键在搜索结果中找到相应结果，点击进入相应页面有没有更简单快捷的操作方法？答案是 GitHub Awesome Complete 这款 Chrome 插件。这款插件能够让你在 GitHub 中输入关键字之后通过弹窗动态显示相应的搜索结果，你所需要做的，只是点击即可。
6.：增强你的 GitHub 体验除了以上两款 GitHub 相关的插件，这里我还要介绍一下 Octo Mate 这款能够提升你的 GitHub 体验的小工具。对于这款插件，主要功能有以下四点：一键下载文件：GitHub 可以让你很方便的以 .zip 格式下载所有文件，但如果只需要下载一个文件，非常麻烦。使用 Octo Mate 后只需要点击文件图标即可下载。一键打开项目的 Github Pages显示仓库大小显示未读消息数相信这样一款插件一定能让你在使用 GitHub 的时候更加高效。
7.：你的网页标尺前端开发者在调试网页的时候，一定会遇到需要查看网页中某个具体控件或者整个网页具体尺寸的情况，这时候，Page Ruler 能够帮你完成这一项工作，测量网页元素，再也不用打开占据大片空间的「检查元素」窗口了。
8.：网页自适应测试工具你的网页对于各类设备的自适应情况怎么样？正常情况下，我们需要同时在不同的设备上测试网页的自适应情况，有了 User-Agent Switcher for Chrome，只需要一个浏览器插件，你可以随时更换 UA，测试网页的自适应情况，帮你很好地提高了开发效率。
9.：解放双手的 Android 测试工具实机调试 Android 应用，你是不是还在一边测试着 Android 设备一边在电脑上修改代码？有了 Vysor 这款 Chrome 插件，只需要通过 USB 连接，你就可以直接在 Chrome 中通过鼠标操作 Android 设备，设备间切换造成的时间成本降低了，开发效率自然就提高了。
10.：查看网站各种流量数据对于网站开发者来说，除了网站本身的代码设计与开发，网站的各种用户访问数据与流量分析也是很重要的一块工作。SimilarWeb 这款 Chrome 插件能够帮你统计网站的流量来源与排名，查询网站参与等各种网站信息。
除了本篇文章介绍的 Chrome 插件以外，Chrome 浏览器还有许多好用实用的扩展工具，也许你还没有找到你需要的那款浏览器插件，你也可以来掘金上看看，说不定就能找到你需要的那款插件。
专注分享全面免费的IT开发视频资料。目前整理包含Android，iOS，javaweb，大数据，小程序，JNI技术，游戏开发，c/c++，数据结构，黑客技术，.net，html5，javascript，div等欢迎相互学习。【捡代码论坛】。
【捡代码论坛】整理

我要回帖

更多关于 微信开发者工具 的文章

 

随机推荐