有了这8个Chrome扩展工具,Web开发事半功倍!

Chrome浏览器扩展程序,无论对开发人员还是设计人员来说,都是非常有用的,有些扩展程序会对开发工具的某类功能进行增强,也有一些会复制开发工具中的部分特性。从某种意义上来说,Chrome商店中的每个扩展都有其价值,但显然我们不能把所有扩展程序都安装起来。

图片来源:Pixabay

  下面,本文将列出八个比较不错的可供Web开发与设计人员使用的扩展程序,来帮助大家提升自己的工作效率,降低一定的难度。

   1、Responsive Web Design Tester

  响应式Web设计测试器可以帮助开发人员和设计人员确保网站是否能够进行响应。可提供不多不同分辨率的虚拟设备来进行测试,安装时默认的可用屏幕尺寸有320、480、640、768、1024、1280。用户也可以手动向列表中添加自定义设备。

  甚至移动设备的屏幕尺寸也可以测试。

   2、WhatRuns

  Whatruns扩展程序可以帮助用户发现站点中所实现的技术栈。只需点击一下,就可以确定前端框架的类型、营销策略的类型、内容分发网络(CDN)、内容管理系统(CMS)等等。

  无需注册,完全免费。

   3、ColorZilla

  ColorZilla是Chrome和Firefox中最先进、最流行的颜色选择器和滴管工具。有了这个扩展程序,颜色读取会变得很容易,可以在屏幕的任何位置识别颜色。Colorzilla的主要功能是滴管,网页颜色分析,调色板查看器,高级梯度生成器,历史使用颜色。

  Colorzilla能够从Flash对象中选择颜色,从缩放比例中选择颜色。

图片来源:Pixabay

   4 UserSnap

  UserSnap可以让你对屏幕进行捕捉,并允许你对捕获的图像进行注释。UserSnap在收集用户反馈、跟踪Bug报告、对Web应用程序原型提供反馈时非常有用。

  Usersnap会自动为截取的图像添加浏览器版本、操作系统和屏幕分辨率等信息。

   5、PageRuler

  Pageruler用于获取元素的尺寸及其在网页中的位置。该工具中是以像素的形式进行测量的。要获得测量值非常简单,只需在页面中绘图,它就会显示出高度和宽度。

  显示顶部、底部、高度、宽度、左侧和右侧位置。可以通过方向键调整大小以及进行移动。

   6、Dimensions

  Dimensions是设计师测量屏幕尺寸的工具。它以垂直和水平的方式进行测量,即从鼠标指针的上/下和左/右开始。

  Dimensions对于输入字段、按钮、视频、文本图标、gif等元素非常适用,但不适用于测量图像。

   7、WhatFont

  WhatFont可以帮助你查找网页中使用的字体。用户可以将鼠标悬停在文本上,以此来标识文本的字体。它还可以检测该字体服务是由谁所提供的,像Typekit和谷歌字体API。

   8、PerfectPixel

  PerfectPixel是专为设计师设计的,方便用户精确地编写CSS与HTML,具有堪称完美的精度。这个扩展允许用户放置一个半透明的覆盖层来比较他们的设计和结果。

  PerfectPixel支持一个页面上的多个覆盖层,覆盖层被保存在浏览器会话中,因此每个页面可以有不同的覆盖层。

  原文作者:Santhosh 来源:bleedbytes

Image placeholder
Sunny1995
未设置
  17人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何使用Vue构建Chrome扩展程序

浏览器扩展程序是可以修改和增强Web浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。好消息是浏览器扩展并不难写。可以用你已经熟悉的Web技术(HTM

为什么说 Python 是人工智能最佳Web开发的语言?

由于所有用户都可以使用大量的预构建库,因此Python非常适合人工智能在Web开发中的应用–但是还有什么能让它变得如此吸引人?在AbsoluteDigitalMedia,我们将仔细研究Python的历

web开发需要的构件

所需要内容 客户端浏览器 超文本标记语言HTML 层叠样式表CSS控制页面的外观 客户端脚本编程语言 wbe服务器,主要功能提供网上信息浏览服务 服务器脚本编程语言 数据库管理系统

AWS在中国开通三个CloudFront站点,可降31%的延迟

4月23日,北京消息,亚马逊旗下公司AmazonWebServices,Inc.(AWS)今天宣布,通过与宁夏西云数据科技有限公司(简称西云数据)协作,在中国开通三个由西云数据运营的AmazonClo

​中台战略:业务中台的8个设计原则

业务中台是一个充满生命力的个体,它承载业务逻辑、沉淀业务数据、产生业务价值,并随着业务不断发展进化。它的设计遵循如下图所示的8个原则。业务中台设计的8大原则01 服务松耦合原则(1)面向接口实现这是服

数据科学在市场营销领域的8个最佳用例

在这篇文章中,我们将介绍一些数据科学在营销领域的关键用例。就数据科学的关键目标是将数据转化为可操作的洞察而言,为了获得更高的盈利,营销领域不能忽略这些洞察的应用。大数据技术,为在营销中更好地了解目标受

GoWeb教程_14.0. 扩展 Web 框架

第十三章介绍了如何开发一个Web框架,通过介绍MVC、路由、日志处理、配置处理完成了一个基本的框架系统,但是一个好的框架需要一些方便的辅助工具来快速的开发Web,那么我们这一章将就如何提供一些快速开发

聊聊chronos的pullFromDefaultCFAndPush

序本文主要研究一下chronos的pullFromDefaultCFAndPushpullFromDefaultCFAndPushDDMQ/carrera-chronos/src/main/java/

从十万份开发者调查报告中,发现了这些信息

StackOverflow是一个面向程序员的技术问答网站,每年都会进行一次开发者问卷调查。本次收集了10万名开发者的调查问卷,分别对程序员的工作状况、开发语言、工具以及生活习惯等做了调查。参与调查的开

聊聊chronos的DeleteBgWorker

序本文主要研究一下chronos的DeleteBgWorkerDeleteBgWorkerDDMQ/carrera-chronos/src/main/java/com/xiaojukeji/chron

2019下半年,Wi-Fi 6“加量不加价”

Wi-Fi技术一直处于蓬勃发展的状态,其更新换代的速度令人惊叹。自1997年802.11诞生以来,Wi-Fi协议平均每五年就会升级一次,现已经发展到了第六代,即Wi-Fi6(802.11ax)。纵观W

5G已经来了,Wi-Fi 6还会远么?

即将于2019下半年发布的WI-Fi6,将使无线网络比以往更快、更可靠、更节能,但这究竟意味着什么呢?Wi-Fi6是Wi-Fi联盟为802.11ax命名的新名字,旨在使Wi-Fi世代更易于普通计算机用

网易裁员事件,我给大家挖了这些法律知识,建议收藏!

网易裁员事件搞得沸沸扬扬的,这两天网易也对事件进行了回复,基本上可以确认事情属实,不了解事件经过的朋友可先看这篇文章:《有态度的网易(暴力裁员),难道这就是网易的“态度”?》。从这个事件中其实也暴露了

GoWeb教程_08.0. Web 服务

Web服务可以让你在HTTP协议的基础上通过XML或者JSON来交换信息。如果你想知道上海的天气预报、中国石油的股价或者淘宝商家的一个商品信息,你可以编写一段简短的代码,通过抓取这些信息然后通过标准的

GoWeb教程_08.2. WebSocket

WebSocket是HTML5的重要特性,它实现了基于浏览器的远程socket,它使浏览器和服务器可以进行全双工通信,许多浏览器(Firefox、GoogleChrome和Safari)都已对此做了支

GoWeb教程_13.0. 如何设计一个 Web 框架

前面十二章介绍了如何通过Go来开发Web应用,介绍了很多基础知识、开发工具和开发技巧,那么我们这一章通过这些知识来实现一个简易的Web框架。通过Go语言来实现一个完整的框架设计,这框架中主要内容有第一

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

死磕Synchronized底层实现,面试你还怕什么?

关于 synchronized 的底层实现,网上有很多文章了。但是很多文章要么作者根本没看代码,仅仅是根据网上其他文章总结、照搬而成,难免有些错误;要么很多点都是一笔带过,对于为什么这样实现没有一个说

聊聊chronos的BackupDB

序本文主要研究一下chronos的BackupDBBackupDBDDMQ/carrera-chronos/src/main/java/com/xiaojukeji/chronos/db/Backup

Java教程_在 Nashron 中使用 Backbone.js

这个例子展示了如何在Java8的NashronJavaScript引擎中使用Backbone.js模型。Nashron在2014年三月首次作为JavaSE8的一部分发布,并通过以原生方式在JVM上运行

笨办法学 Linux Bash:Shell、`.profile`、`.bashrc`、`.bash_history`

Bash:Shell、.profile、.bashrc、.bash_history。 当使用CLI(命令行界面)来使用Linux时,你正在与一个名为shell的程序进行交互。所有你输入的都传递给she

Java如何在没有throws签名的函数中手动抛出异常

如果想在方法中抛出异常,像下面这样直接throw是不行的。publicvoidtest(){ thrownewException(); }这时编译器会给我们一个错误:Error:(101,13)jav

扩展包助手,一键生成 Composer/PHP/ThinkPHP/Laravel 扩展包

ComposerPackageBuilder扩展包助手,一键生成composer/php/thinkphp/laravel扩展包安装composergrequirehuangdijia/compose

Composer包管理工具精讲及搭建自己的PHP开发框架笔记

https://www.lmonkey.com/chapters/dvy9p2EKN/tasksComposer包管理工具精讲及搭建自己的PHP开发框架

使用 ivx 开发 web 全栈项目

前言 本人是一枚喜欢探索黑科技的web前端,没事喜欢研究研究框架,了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估