chrome 扩展程序和开发者工具

扩展程序

下面介绍开发过程中比较实用的工具

• Prism-Pretty 这是一款非常不错的 JS、CSS 代码格式化高亮的 Chrome 扩展，详细介绍看这里，http://www.v2ex.com/t/164225
• Devtools Terminal浏览器终端操作，安装过程稍微有点复杂，按照官方说的一步一步安装即可，需要 nodejs 环境，参考帮助文档 http://blog.dfilimonov.com/2013/09/12/devtools-terminal.html
• Eye Dropper 吸取网页中的颜色
• BrowserStack Local 本地测试app，没搞明白怎么用，待研究
• Page Ruler ——画一把尺子以得到像素维数和定位，并测量任何网页上的元素。
• Pesticide ——这个扩展可以插入Pesticide CSS到当前页，形成每个元素的示意图以便于更好地看到它们在页面上的位置。
• Responsive Web Design Tester ——在移动设备上测试移动网站。此扩展反映了移动设备的大小和它的浏览器。
• Palettab ——将超棒的颜色和字体带给新的标签页!每次点击新标签按钮，都会给你一点点新鲜。该扩展插件可以帮助我们选择背景主题和和字体
• HTML5 Outliner ——用标题和分节元素生成一个可导航的页面大纲。
• SelectorGadget ——Selector Gadget 是一个开源的Chrome浏览器扩展，能够让CSS选择器轻而易举地生成和发现于复杂网站。
• Stylebot ——瞬间改变网站的外观。

开发者工具

• 像Sublime Text一样使用Chrome DevTools
• chrome-devtools-zerodarkmatrix-theme 该主题不错
• greybeard-devtools 设置自定义主题，需要 chrome://flags/ 然后开启开发者功能，打开 chrome devtools 选择 setting 切换到 experiments 勾选 Allow custom UI themes

参考文章

• http://www.html5cn.org/article-9324-1.html