现在设我是一位 web 开发人员，以 Chrome 为阵地。下面是一些能让我少花点时间的工具：
WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法，这样你就可以为己所用了。
Pesticide—— 修改 CSS 的绝佳程序。当我试着学习匣子模型的时候，它简直就是救命稻草般的存在。
Colorzilla ——用于复制确切颜色的一个网站，用它可以将颜色直接复制到剪贴板上，这样你就没必要花太多时间获得正确的 RGBA 组合了。
CSS Peeper——查看网站使用的颜色时非常方便。在你一开始山寨你认为酷的网站的时候很管用。这个程序能让你查看它们的幕后的色彩方案。
Wappalyzer ——想要获悉你在网站上看到的是什么技术，这个程序很有用。想知道某网站使用什么样的框架或者它承载了什么服务?这个照样管用。
React Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写 React 程序时才有用。
Redux Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写 Redux 程序时才有用。
JSON Formatter ——让 JSON 在浏览器中看起来更一目了然的不二之选。也许麻烦的 JSON 让你苦不堪言，不过只要用了这个软件，找到你要找的东西，所花费的时间会大幅缩短。
Vimeo Repeat and Speed ——加速 Vimeo 视频的绝佳工具。如果你像大多数的 web 开发人员一样观看视频教程，你就会知道用 1.25 倍的常规回放速度观看它们是多么的方便。本程序同时也有适用于 YouTube 的版本。
VS Code 扩展程序
Visual Studio Code 是我写代码时的不二之选。
每个人都有他自己喜欢的文本编辑器，我也不例外。不过，我还是想把这些扩展程序介绍给你，而它们对你所使用的大多数编辑器都适用。看看我最喜欢的扩展程序有哪些：
Auto Rename Tag ——自动重命名成对的 HTML 标记。假如你创建了一个
标记。现在你想更改它。有了这个软件，你只需要更改一个就行，另一个会自动修改。从理论上来说，使用这个软件可以把你的工作效率提升一倍。
HTML CSS Support ——HTML 文档的 CSS 支持工具。该工具在获得一些简洁的语法高亮显示和代码建议方面非常有用。
HTML Snippets ——这一工具在代码分段方面非常有用，可以为你节省大量的时间。它能跟 Emmet 配对，这样一来你甚至都不用再真正键入 HTML 了。
Babel ES6/ES7 ——JavaScript Babel 的辅助工具。如果你用的是 Babel，这个工具可以让你更容易区分代码。如果你喜欢 JavaScript，那务必也不要错过这款软件。
Bracket Pair Colorizer ——色彩可视化工具。如果你没有准确地括号，那这个工具对于发现因此导致的许多常见漏洞十分方便。
ESLint ——你在编写代码的时候，利用这个软件可以轻易获取有关漏洞的提示，而且在编码过程中，它还可以帮助你养成良好的编码习惯。
Guides ——这一工具可以被用来添加额外的指导行代码。这是另一个视觉提示，以确保你正确地括号了。
JavaScript Console Utils ——使控制台日志记录变得更为简单可行。如果你像大多数开发人员一样，你会发现自己需要在调试流中登录到控制台(我知道我们应该使用调试器)。这个实用的程序使得创建有用的 console.log ()语句变得易如反掌。
Code Spell Checker ——这一工具正如其名，是拼写检查程序。漏洞的的另一个常见来源是变量或函数名。这一拼写检查工具可以查找不常见的单词，而且还可以把我们用 JavaScript 编写的东西进行有效的审核。
Git Lens ——可以让我们对某文件何时、以及由何人进行更改变得一目了然。当代码被破坏时，我们就能找到该负责任的人，而不是让你当替罪羊了。
Path Intellisense ——文件路径自动完成程序。这样一来从其他文件中导入重要的东西就非常方便了。这一工具使文件导航变得轻而易举。
Prettier ——自动代码格式化程序。忘掉那些你不得不手动缩进代码的日子吧，有了这个工具，事情就变得简单多啦。这个程序会比你自己做得更快更好。对这个程序我是鼎力推荐的。
VSCode-Icons ——将图标添加到文件谱中。如果文件结构非常不科学，你的眼睛想罢工的话，这个程序可能会有所帮助。它对于你正在制作的任何文件都能提供有用的图标辅助，能使你更为轻易地区分看到的内容。
希望可以帮到您，谢谢！
相信我谷歌浏览器是浏览器里绝对最好的，想用好浏览器一定要知道这20个有用的扩展程序。
CSS Viewer是一个简单但非常有效的 Web 开发者 Chrome 扩展。顾名思义，无论您将鼠标悬停在何处，此插件都会向您显示给定页面的 CSS 属性。将出现一个小的弹出窗口，向您显示构成您指向的元素的 CSS 数据。
无论您是想创建简单的 WordPress 主题还是现代和复杂的主题，这都是一个非常智能的扩展，可以在您将鼠标指向的任何地方轻松识别关键 CSS 属性。
WhatFont 对于需要识别网页上使用的字体的开发人员来说是一个非常有用的 Chrome 扩展程序。它快速、有效，并且可以在几秒钟内识别页面中的单个字体。它还标识了家庭、大小、重量和颜色。所有这些都在浏览器的一个小弹出窗口中。
Fonts Ninja以与 WhatFont 类似的方式来识别网页中的字体。如果 WhatFont 出于任何原因不适合您，这是一个有用的选择。它的工作原理几乎相同，但界面更小。否则，这两个扩展的外观和感觉非常相似。
安装扩展程序，您应该会在工具栏中看到一个小的绿色忍者图标。在 Chrome 中打开网页，选择图标，然后将鼠标悬停在您要识别的字体上。您应该会在突出显示的字体上看到一个页面概览弹出窗口和一个单独的弹出窗口。简单但非常有效。
Page Ruler Redux 是一个 chrome 扩展，可让您查看网页上任何元素的宽度、高度和位置。 这对于优化您的网站以获得更好的可读性非常有帮助。此外，Page Ruler Redux 提供了键盘快捷键，可以轻松浏览您的网页。
CSS Peeper允许您检查网站上使用的整个调色板。您可以以视觉上吸引人的方式查看所有这些列表，以便您找到它们。
CSS Peeper是为设计师量身定制的 CSS 查看器。使用 Chrome 扩展程序访问有用的样式。使命是让设计师专注于设计，并尽可能少地花时间挖掘代码。
Window Resizer对于 Web 开发人员来说是一个非常有用的 Chrome 扩展。它简单但非常有效，尤其是在使用响应式设计或应用程序时。它会安装到 Chrome 中，并将您正在使用的任何屏幕调整为一系列流行的屏幕尺寸。Window Resizer 等扩展有助于开发在桌面和移动设备上看起来很棒的响应式网页设计。
涵盖了最常见的尺寸、移动设备、平板电脑、台式机，并且仿真似乎非常准确。这里的人经常使用 Window Resizer 并对其评价很高。这对我们来说已经足够了！
BrowserStack是另一个对 Web 开发人员非常有用的 Chrome 扩展。与 Window Resizer 一样，此扩展程序允许您测试您的工作的响应能力。此扩展程序允许您使用不同的浏览器进行测试，而不是不同的屏幕尺寸。
安装扩展程序，在 Chrome 中打开您的页面，选择 BrowserStack 并从选项卡中选择一个设备选项。然后将使用该设备上的浏览器仿真来呈现该页面。简单但非常有效。不过，您确实需要一个 BrowserStack 帐户才能使其正常工作。
此扩展程序可帮助您以像素完美的准确性开发您的网站！
PerfectPixel允许开发人员和标记设计人员在已开发的 HTML 顶部放置一个半透明的图像叠加层，并在它们之间进行像素完美的比较。
如果您在 GitHub 上花费大量时间寻找新项目，Githunt非常有用。这个 Chrome 开发者扩展不依赖于 GitHub 的趋势项目提要，而是通过在浏览器的新选项卡区域中突出显示所有趋势项目，从而将其脱颖而出。
您可以搜索不同语言的项目，并阅读简短的项目描述和当前打开的问题数量。然后，您只需在选项卡中选择项目即可转到该项目并进一步检查它。如果您喜欢为新项目做出贡献，这是一个非常有用的小扩展。
Wappalyzer是一个非常有效的工具，用于识别网页背后的底层技术。它可以快速识别 Web 服务、CMS 类型、分析工具、插件、JavaScript 库和大量其他应用程序。如果您想知道页面背后的秘密，这是找出答案的一种方法。
只需安装扩展程序，在页面上选择它，就会出现一个弹出窗口，突出显示该页面上运行的所有可识别应用程序。
分析任何网页是否违反最佳实践。此扩展可帮助 Web 开发人员轻松发现网站中的问题区域。
生成调色板的免费浏览器扩展。设计师和前端开发人员必备的工具。抓取任何网站的颜色。
GoFullPage 是一个浏览器扩展程序，可以截取您在浏览器中查看的整个网页的屏幕截图。当您单击扩展程序图标时，扩展程序会向下滚动，并且在当前页面上，您正在浏览器中查看，将每个滚动窗口组合成一个显示在新选项卡中的图像。
Check My Links是一个链接检查器，它可以抓取您的网页并查找损坏的链接。它是主要为网页设计师、开发人员和内容编辑器开发的扩展。
当您编辑一个包含大量链接的网页时，能够快速检查页面上的所有链接是否正常工作不是很方便吗？这就是“检查我的链接”的用武之地。
该扩展程序可以快速找到网页上的所有链接并为您检查每个链接。它突出显示哪些是有效的，哪些是坏的，就这么简单。
您可以一键将所有坏链接复制到剪贴板！
Lorem Ipsum Generator是最好的 Chrome 扩展之一。它的功能正如其名称所暗示的那样。它为演示网站生成填充文本并且做得很好。
只需安装扩展程序，在页面中选择它，告诉它您要生成多少 Lorem Ipsum 副本，然后从窗口中复制它。将其粘贴到您的页面中，您就完成了。
Corporate Ipsum是 Lorem Ipsum Generator 的流行替代品。如果您的客户对占位符文本更加挑剔，或者您想增加商业网站的感觉，那么这就是您来的地方。这个 Chrome 开发者扩展会生成 lorem ipsum，但带有企业风格。
它也很像 Lorem Ipsum 生成器。安装扩展程序，打开您的页面，选择图标并告诉它要生成多少副本。复制并将其分页到位并移动到下一个。这是一种生成更多面向业务的占位符文本的快速、简单的方法。
React Developer Tools专门用于开源 React JavaScript 库。如果您使用 React，此扩展可帮助您根据需要检查库。
安装扩展程序，您应该会在 Chrome 工具栏中看到两个图标。一个用于组件，另一个用于 Profiler。组件向您显示 React 在页面上使用的内容，而 Profiler 向您显示性能数据。如果您使用 React，这是必不可少的工具！
EditThisCookie是一个对开发人员非常有用的 Chrome 扩展。它使您能够按页面编辑、删除、创建和保护 cookie。它还允许您将它们导出以进行分析、阻止它们、将它们导入 JSON，并且通常可以对 cookie 执行尽可能多的操作。
最有用的工具是搜索和读取 cookie 的能力。开发人员会发现大多数工具在某一时刻很有用。
UX Check是一个可用性分析器，它使用 Nielsen 的 10 个启发式方法来评估页面。它可以快速突出潜在的可用性问题，并使您能够添加注释、截屏并导出准备在团队中共享的发现。
UX Check 是一种非常有效的方式来执行轻量级用户测试，而不需要过多的细节。在交付项目进行全面测试之前作为第一次通过测试的理想选择。
Checkbot 它检查页面的链接、错误、安全性、性能、搜索引擎优化和一系列其他注意事项。这是一个非常有用的工具，可以添加到您的曲目中，并且对于发布前的最后一遍非常有用。
这20个扩展工具前端开发人员很有用，也有一些专门适用于狭窄领域的工具。可以让您的工作更轻松。无论是通过提高生产力、解决问题还是简化流程，这里都有工具可以完成所有这些事情，甚至更多。
不如右键选择open link in new tab来查看吧，这样就可以自动换行了，chrome的resources是严格按照元素内部文本结构来呈现的，也就是如果它的网站CSS是经过压缩的，把所有换行都清除掉了，在resources里面就是一行显示全部；如果网站的CSS里面是分行显示的，在resources里面也就是分行显示，似乎也没有什么地方可以改变这一设置，一般这些CSS要看的话都是下载下来或者新开一个页面看了，没有必要在开发者工具里面看，空间又小又挤，看起来也费力，而且要调试的话直接在elements里面就可以解决问题了。
