Chrome web 开发用到的插件

简介: 个人博客:付博瀚的个人博客 现在设我是一位web开发人员,以Chrome为阵地。下面是一些能让我少花点时间的工具:WhatFont —— 名字就说明了一切。

个人博客:付博瀚的个人博客
现在设我是一位web开发人员,以Chrome为阵地。下面是一些能让我少花点时间的工具:

  1. WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法,这样你就可以为己所用了。
  2. Pesticide—— 修改CSS的绝佳程序。当我试着学习匣子模型的时候,它简直就是救命稻草般的存在。
  3. Colorzilla ——用于复制确切颜色的一个网站,用它可以将颜色直接复制到剪贴板上,这样你就没必要花太多时间获得正确的RGBA组合了。
  4. CSS Peeper——查看网站使用的颜色时非常方便。在你一开始山寨你认为酷的网站的时候很管用。这个程序能让你查看它们的幕后的色彩方案。
  5. Wappalyzer ——想要获悉你在网站上看到的是什么技术,这个程序很有用。想知道某网站使用什么样的框架或者它承载了什么服务?这个照样管用。
  6. React Dev Tools——一款用于调试应用程序的工具。有一点要提一下,它只有在你编写React程序时才有用。
  7. Redux Dev Tools——一款用于调试应用程序的工具。有一点要提一下,它只有在你编写Redux程序时才有用。
  8. JSON
    Formatter ——让JSON在浏览器中看起来更一目了然的不二之选。也许麻烦的JSON让你苦不堪言,不过只要用了这个软件,找到你要找的东西,所花费的时间会大幅缩短。
  9. Vimeo Repeat and
    Speed ——加速Vimeo视频的绝佳工具。如果你像大多数的web开发人员一样观看视频教程,你就会知道用1.25倍的常规回放速度观看它们是多么的方便。本程序同时也有适用于YouTube的版本。

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

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

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

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

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

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

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

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

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

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

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

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

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

  23. Web Developer —以工具栏形式提供一系列Web开发工具, 这是Web
    Developer官方为Chrome开发的版本,他们也为 Firefox、Opera开发了相应插件。

  24. Responsive Inspector —用于查看被访问网站的媒体特性(media
    query)。开发响应式Web布局时,可以直观地显示CSS样式表所定义的分辨率的效果。

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

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

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

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

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

  30. Pesticide — 在当前网页插入Pesticide CSS,为元素添加明显的边框,方便查看元素位置。

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

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

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

  34. Font
    Changer —修改包括Facebook、Twitter、Google、Youtube在内的任意网站的字体。可以试试Google
    Web Fonts™字体的效果。

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

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

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

  38. Stylebot — 快速修改网站样式。

欢迎访问我的个人博客–付博瀚的个人博客

目录
相关文章
|
3天前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
|
4天前
|
设计模式 开发框架 数据库
Python Web开发主要常用的框架
【5月更文挑战第12天】Python Web开发框架包括Django、Flask、Tornado和Pyramid。Django适用于复杂应用,提供ORM、模板引擎等全套功能;Flask轻量级,易于扩展,适合小型至中型项目;Tornado擅长处理高并发,支持异步和WebSockets;Pyramid灵活强大,可适配多种数据库和模板引擎,适用于各种规模项目。选择框架需依据项目需求和技术栈。
122 2
|
2天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
|
2天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
2天前
|
JavaScript 前端开发 开发者
在Web开发中,事件处理是一个至关重要的概念
【5月更文挑战第17天】Vue.js的事件处理是其核心特性之一,允许开发者响应用户操作。通过v-on(或@)指令绑定DOM事件到方法,实现交互。事件修饰符如.stop、.prevent等简化处理逻辑。此外,Vue支持自定义事件,便于组件间通信,如子组件通过$emit触发事件,父组件使用v-on监听并响应。理解这些机制能帮助开发者更有效地管理Vue应用的事件流程。
9 0
|
2天前
|
前端开发 JavaScript 算法
探索现代Web开发中的前端框架选择
在现代Web开发中,前端框架的选择是至关重要的。本文将深入探讨各种前端框架的特点和适用场景,帮助开发者了解不同框架的优势和劣势,并为他们提供在项目中做出明智选择的指导。
|
2天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
3天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
11 1
|
3天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
9 2
|
4天前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
12 0

热门文章

最新文章