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个扩展工具前端开发人员很有用，也有一些专门适用于狭窄领域的工具。可以让您的工作更轻松。无论是通过提高生产力、解决问题还是简化流程，这里都有工具可以完成所有这些事情，甚至更多。
IE9浏览器默认情况下隐藏了浏览器菜单栏，因此在打开IE9浏览器以后，需要按键盘上的ALT键来显示浏览器工具栏。2
在显示出来的IE菜单栏上点击菜单“查看”→“源文件”。
3
IE浏览器会自动打开一个新的窗口来显示网页源代码。
4
哦~这份缘文件实在太难看懂了~别着急，其实IE9提供了一个更为强大的网页源代码查看工具——开发者工具。
点击IE9浏览器右上角的齿轮图标，在下拉菜单中点击“F12开发者工具”，或者直接按键盘上的快捷键F12也可以打开开发者工具。
5
IE9的开发者工具提供更为强大的网页开发查看代码和调试功能，你可以使用开发者工具更方便地查看网页HTML代码，CSS样式代码和脚本等信息。
END
使用Firefox火狐浏览器查看网页源代码
1
Windows Vista/7用户：点击Firefox浏览器左上角的快捷菜单，在下拉菜单中点击“Web开发者”→“查看页面源代码”。
Windows XP/Linux用户：点击Firefox浏览器的菜单“工具”→“Web开发者”→“查看页面源代码”。
键盘快捷键：Ctrl+U
2
Firfox浏览器会打开网页源代码窗口显示网页HTML源代码。
3
如果想要查看其中外联的CSS源文件，可以用鼠标点击源代码中的CSS外联文件链接网址。
4
不过自带的之中网页源文件查看器并不好用，你可以尝试使用插件Firebug来获取更好用的网页开发功能。
点击“Web开发者”→“获取更多工具”。
5
在弹出的Firefox新标签页中安装插件“Firebug”。
6
安装完成以后会在Firefox浏览器的右上角工具栏中添加Firebug的图标，点击它就可以使用Firebug网页调试工具了。
这个工具相当强大哦~
END
使用谷歌Chrome浏览器查看网页源代码
点击Chrome浏览器右上角的快捷菜单“工具”→“查看源代码”。
Chrome浏览器会打开一个网页源代码显示窗口，这个源代码显示窗口好像也是不那么友好，一大堆网页代码实在不知道如何下手呀。
如果你想要更好的网页源代码显示和开发工具，那就点击Chrome浏览器右上角的快捷菜单“工具”→“开发者工具”。
看看，不需要下载任何插件，Chrome浏览器就已经为你提供了一个相当强大的网页开发者工具了。
使用Chrome浏览器开发者工具来查看和调试CSS也相当好用。
CSS文件是无法独立运行的，必须与HTML的代码配合起来才能看到效果的，CSS就是对HTML文件进行样式控制的（包含长，宽，高，色，字体大小等）。查看CSS的文件最简单的可以使用文本编辑器查看。CSS的应用可以分为两种，一种是直接写在HTML的代码内，如下例：（通常在<head></head>之间）<style type="text/css"><!-- body{color=redfont-size=9pt}--></style>此CSS样式格式了页面字体为红色的，字体大小为9 pt。还有一种是采用引用的方式，如下例：（通常在<head></head>之间）<LINK REL=stylesheet HREF="**.css" TYPE="text/css">上面的两种最终是效果是一样的，如果CSS的样式比例多，可以使用引用的方式，以防过多的CSS代码增加页面的大小与阅读的可读性。CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。
