Chrome web 开发用到的插件

  • 时间:2018-11-02 23:07 作者:程序员小新人学习 来源:程序员小新人学习 阅读:130
  • 扫一扫,手机访问
摘要:现在设我是一位web开发人员,以Chrome为阵地。下面是少量能让我少花点时间的工具:WhatFont?——?名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法,这样你即可以为己所用了。Pesticide——?修改CSS的绝佳程序。当我试着学习匣子模型的时候,它简直就是救命稻草般的存在。Co

现在设我是一位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的版本。

Devtools Terminal—嵌在浏览器中的终端。开发调试利器!

LiveReload—集成LiveReload官方应用(Mac和Windows)以及guard-livereload、yeoman等第三方工具。帮助开发者快速构建Web应用。

· BrowserStack

Local?—?本地测试工具,借助它可以快速完成本地/内部服务器配置和测试工作,以及HTML、CSS、JavaScript静态文件的配置和测试。用BrowserStack提供的安全、便捷的云服务,在700多个真实的桌面系统和移动浏览器中,测试应用的布局、工作流和交互性。

JSONView?—用来验证和查看JSON文件。

Postman?—接口调试工具。接口编写、调试、文档撰写过程使用它能提升工作效率。有100多万客户了。

Window Resizer?—调整浏览器窗口大小,模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。

WhatFont?—?识别网页所使用的字体。

Page Ruler?—获取任意网页中元素大小、位置信息。

Web Developer

Checklist —?自己的网站能否符合Web设计、开发的最佳实践?对照这份清单,就能很容易发现网站能否有问题。

Image Downloader?—?查看和下载网页中的图像。

Alexa Traffic Rank?—?Alexa

Internet为Chrome开发的免费网站流量排名查看工具。在不干扰客户访问网站的情况下,给出当前网站的Alexa数据。

Eye Dropper?—?开源拾色器软件,可以从网页、其余拾色器和你用过的颜色中拾取颜色。

Firebug

Lite?—?它可不是用来替代Firebug或者Chrome的开发者工具,而是配合这些工具来使用。你可以像使用Firebug那样,用它来查看HTML、DOM元素和盒子模型。它还能提供其余比较酷的功能,比方用鼠标查看HTML元素,编辑CSS属性后能立马看到效果等。

Web Developer?—以工具栏形式提供一系列Web开发工具, 这是Web

Developer官方为Chrome开发的版本,他们也为 Firefox、Opera开发了相应插件。

Responsive Inspector?—用于查看被访问网站的媒体特性(media

query)。开发响应式Web布局时,可以直观地显示CSS样式表所定义的分辨率的效果。

BuiltWith?—?用于查看当前网站使用什么技术搭建。

Corporate Ipsum?—?随机生成企业相关信息,作为占位文本,方便查看布局效果。

User-Agent

Switcher?—?修改客户代理商(User-Agent)字符串,以假装成某些浏览器和操作系统,还可以伪造特定的URL。

YSlow?—?分析网页,根据能够提高网页性能的一组规则,提出性能改进建议。

CSS Shapes Editor?—?在所选中元素上方显示交互式编辑器,用于新建和调整用CSS写的图形。

Pesticide?—?在当前网页插入Pesticide CSS,为元素增加显著的边框,方便查看元素位置。

Responsive Web Design

Tester?—测试移动网站在移动设施上的效果。该插件能够模拟不同尺寸、装有不同浏览器的移动设施。

Palettab?—?安装后,新开一页卡,就能看到5种颜色和字体搭配方案!每次点击新页卡,就能有新发现。

jQuery Audit?—?在元素面板创立侧边栏,显示jQuery委托代理商事件、内部数据、当前选中的DOM节点、函数和对象等信息。

Font

Changer?—修改包括Facebook、Twitter、Google、Youtube在内的任意网站的字体。可以试试Google

Web Fonts?字体的效果。

HTML5 Outliner?—?使用网页中的标题和分区信息,创立可点击的大纲视图。

PerfectPixel?— 在页面上显示半透明的图像,便于逐像素比照调整前后的页面效果,以达到最佳水准。

SelectorGadget?— 有了这个开源工具,为复杂网站的元素生成CSS选择器,以及查看选择器所匹配的元素都将变得轻而易举。

Stylebot?—?快速修改网站样式。

Chrome web 开发用到的插件

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
手机二维码手机访问领取大礼包
返回顶部