作为一个开发人员，你需要知道的 15 个 Chrome 扩展

最新推荐文章于 2024-03-15 13:14:40 发布
最新推荐文章于 2024-03-15 13:14:40 发布
阅读量2.3k 收藏 6
点赞数 3
文章标签： chrome webkit web developer 扩展工具

1 前言

　　Chrome，是一个由 Google 公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。但是 Chrome 的优点并不局限于此，称其为一个优秀的开发者伴侣也不过为，因为其为开放者提供了丰富的扩展工具，咱们可以通过访问“ Google Developer ”来获取更为详细的内容。在本篇博文中，通过翻译，为大家介绍 15 个比较好用的 Chrome 扩展工具！

2 Chrome扩展

1. Web Developer

Chrome 的 Web 开发扩展里添加了一个可用不同工具的小工具栏，其绝对是开发者最有用的 Chrome 扩展之一。

1

访问地址：Web developer extension

2. Responsive Web Design Tester

Responsive Web Design Tester 是一个很棒的 Chrome 扩展，可以帮助你快速查看你的网站在不同的浏览器和设备上的行为。

2

访问地址：Responsive Web Design Tester

3. Window Resizer

Window Resizer 扩展允许你快速调整浏览器的窗口，你也可以通过点击菜单栏中的图标打开一个自定义窗口大小的下拉菜单。

3

访问地址：Window Resizer

4. ColorPick Eyedropper

ColorPick Eyedropper 是一个简单的颜色拾取工具，允许你从任意网页中选择颜色值。

4

访问地址：ColorPick Eyedropper

5. CSSViewer

CSSViewer 是一个简单的 CSS 属性查看器。它有一个浮动面板，上面不但指明了鼠标所在处的特征，还提供了其字体、文本、颜色、背景、框、定位和效果属性的说明。CSSViewer 可以帮助你快速获取你所需要的基本 CSS 信息。

5

访问地址：CSS Viewer

6. Lorem Ipsum generator

Lorem Ipsum Generator 提供了一个简单快捷的方法来创建默认文本。当然，如果你之前设置了一些用于占位的默认文本，那就更加快捷啦！

6

访问地址：Lorem Ipsum generator

7. Ghostery

Ghostery 是一个非常棒的 Chrome 扩展，其可以检测跟踪器、像素和网站上的一些嵌入代码。通过 Ghostery，你可以立即知道你访问过的网页上安装了什么插件和跟踪器，更进一步，Ghostery 还能保护你的隐私。此外，使用 Ghostery 扩展无需注册或者登陆。

7

访问地址：Ghostery

8. Wappalyzer

同 Ghostery 类似，Wappalyzer 扩展能让你知道任何特定网站上安装了什么软件。它能暴露出技术和内容管理系统、电子商务平台、Web 服务器、JavaScript 框架和已安装的分析工具。

8

访问地址：Wappalyzer

9. Usersnap

Usersnap 扩展可以让你直接在浏览器中捕捉和注释任何网页。Usersnap 扩展使提供反馈原型和错误报告变得特别简单，并且所有创建的屏幕截图直接存储在你的项目仪表板中。

9

访问地址：Usersnap

10. IE Tab

在需要做一些手动的 IE 测试，但是却不想安装任何版本的 Internet Explorer 的时候，那就使用支持 Chrome 的 IE Tab扩展吧，它可以直接在 Chrome 中使用 IE 渲染引擎模仿 IE 浏览器。这样你就可以直接在你的 Chrome 浏览器中测试支持 IE6、IE7、IE8 和 IE9 的网站啦！不过，此 IE Tab 扩展目前仅适用于 Windows 系统。

10

访问地址：IE Tab

11. Site Spider

如果你想要寻找网站中中断的链接，并且想限制在一个特定的目录中搜索，那么你就可以使用 Site Spider 啦！

11

访问地址：Site Spider

12. Session Manager

浏览器标签管理是一个用于 web 的非常棒的技术。Session Manager 可以节省你的浏览状态，让你之后可以重新打开 session。特别是，如果你需要重复地打开同一个网页，这就非常有用啦！

12

访问地址：Session Manager

13. Clear Cache

这个扩展特别有用，能让你从工具栏中清除缓存。它在后台工作，意味着不会有任何弹窗和确认对话框来让你分心。你也可以根据你所需要清除的数据定制 Clear Cache，这些数据包括应用程序缓存、下载、文件系统、表单数据、历史、本地存储、密码等等。

13

访问地址：Clear Cache

14. JSONView

作为一名使用 RESTful API 的开发人员，在浏览器上阅读原始的 JSON 数据可以说是相当尴尬的。在树视图中阅读 JSON，比在原始状态下阅读 JSON 更加简单。JSONView 扩展可以帮助你在浏览器中查看 JSON 文件。

14

访问地址：JSONView

15. Image Downloader

需要从网站上下载图片？那么我建议你试试支持 Chrome 的 Image Downloader 扩展。它能够让你批量下载所有的图片。您也可以通过宽度、高度和 URL 过滤网页图片。

15

访问地址：Image Downloader

原文链接：15 HELPFUL CHROME EXTENSIONS FOR DEVELOPERS YOU NEED TO KNOW

CG国斌
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli或vue项目利用HBuilder打包成移动端app操作
10-15
主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app 打包为 H5 并上传服务器
01-08
我主要是用 uni-app 来写安卓端，近日需要将程序打包为 H5 放到 web服务器 上，经过一番折腾。 配置 在开始之前，推荐你先【拷贝】一份代码，防止打包出现问题导致代码受损。 在你的项目文件中找到 manifest.json ，...
HBuilderX打包H5开发的页面为App
那些乐趣的博客
07-02 5131
1：首先下载HBuilderX打包工具 官网地址：https://www.dcloud.io/hbuilderx.html 标准版和App开发板都可以，下载下来后直接解压，点击应用程序打开HBuilderX，如图所示： 2：创建项目，打开HBuilderx后点击文件➡新建➡项目，如图所示： 修改如下红框中的内容： 上图红框解释： ①：打包App的类型 ②：打包App名称 ③：创建的项目地址(后面打包的apk和项目的文件都在这个地址) 3：创建完成后文件夹里的东西全部
hbuild 的uniapp项目打包到 h5 部署到服务器
weixin_54397440的博客
03-15 359
1、uniapp项目 （一般改3 个地方）
网址打包（详细图文教程！） 使用HBuilder将网址打包成app
chestnut栗子的博客
04-01 1万+
使用HBuilder将网址打包成app 使用工具：HBuilder 附上链接：https://www.dcloud.io/hbuilderx.html 教程目的：将封装好的项目网址打包成一个app，即可实现不需要每次输入网址，点击app即可；另外有强制横屏代码以及设置 新手摸索记录，如有错误请友善交流 一、安装HBuilder 点进以上网址进入下载，下载标准版即可 一路点击安装即可，可以自己更改...
使用HBuilder将h5网站打包成app 自行打包
withkai44的博客
06-16 1985
注意:打包成的app可能会出现手机点击返回键直接退出应用，可以加入下面的js代码。1、点击manifest.json，基础配置，APP名字，是否全面屏。双击manifest.json文件进行app的相关配置。2、然后点击图标配置，选好后点自动生成所有图标并替换。配置完成后在index.html中加入跳转js代码。点击模块配置，选VideoPlayer和X5内核。选公测证书然后点打包，（自己有证书就用自己的）然后顶部菜单选发行，选择原生App-云打包。关于启动图，只能使用png格式的。
使用HBuilder编辑器将html5页面打包成APP
热门推荐
qq_35515563的博客
05-03 4万+
使用HBuilder编辑器将html5页面打包成APP （ios+安卓） 1.首先先安装HBuilder编辑器。 下载链接：http://www.dcloud.io/ 2.HBuilder编辑器   菜单---->文件---->新建---->App项目---->新增项目名字---->选择实例模板。 3.新建后，在manifest.json里面修改需要生成
HBuilderX打包 H5
weixin_48616345的博客
02-15 9393
1.第一步获取appID 2.第二步，更改 地址为线上地址，下图这两个文件里的地址 3.第三步 点击图中圈的，打包
HbuilderX打包AndroidAPP使用教程
weixin_54074788的博客
10-26 1万+
HbuildX打包AndroidAPP使用教程
HBuilderX打包流程(H5)
为千万同胞少走弯路而写文！！！
12-05 2981
HBuilderX打包流程(H5)，前端打包操作以及后端操作
HbuilderX打包成apk安卓安装包并装到手机上
AN_NI_112的博客
05-27 9129
HbuilderX打包成apk安卓安装包并装到手机上
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 5344
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
uni-app黑魔法：小程序自定义组件运行到H5平台
01-27
2017年1月9日，微信发布小程序，历经3年发展，在今年主题为”未完成 AlwaysBeta“的微信公开课PRO上，微信团队披露，2019年小程序日活跃用户超过3 ...iOS、Android、H5之后的第四大流量平台。平台分裂，为不同平
HBuilderX uni-app登录实例.zip
09-10
HBuilderX uni-app登录实例
分布式图像处理接口。.zip
04-14
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
MQTT（Message Queuing Telemetry Transport）是一种轻量级的通信协议，通常用于物联网（IoT
04-14
MQTT（Message Queuing Telemetry Transport）是一种轻量级的通信协议，通常用于物联网（IoT）设备之间的通信。它基于发布/订阅模式，允许设备在低带宽、不稳定网络环境下进行高效的通信。 ESP8266是一款低成本、高性能的Wi-Fi芯片，常用于连接物联网设备到互联网。结合ESP8266和MQTT协议，可以轻松地实现物联网设备与云端的通信，例如上传传感器数据、接收远程控制指令等。 有许多针对ESP8266的MQTT烧录软件可用，这些软件通常提供了用户友好的界面，允许用户轻松地配置Wi-Fi连接信息、MQTT服务器信息以及其他设备特定的参数，并将这些信息烧录到ESP8266芯片中。这样，一旦设备上电，它就可以自动连接到Wi-Fi网络并建立MQTT连接，从而实现与云端的通信。 这些软件通常还提供了调试功能，允许用户监视设备与MQTT服务器之间的通信，以及在必要时进行故障排除。 总的来说，MQTT烧录软件为开发物联网应用程序提供了便利的工具，使开发者能够更快地将ESP8266设备连接到云端，并实现双向通信。
ArcGIS用户大会-新形势下的智慧排水.zip
最新发布
04-14
ArcGIS用户大会-新形势下的智慧排水.zip
电力电缆试验作业安全检查表.docx
04-14
电力电缆试验作业安全检查表.docx
相关方管理办法.docx
04-14
相关方管理办法.docx
hbuilderx打包h5APP
07-28
HbuilderX是一个用于开发多种应用的集成开发环境，包括H5应用。要使用HbuilderX打包H5 APP，可以按照以下步骤进行操作： 1. 下载并安装HbuilderX。 2. 在HbuilderX中新建一个项目，选择项目类型为H5 APP。 3. 选择项目的本地存放地址，并填写项目名称，然后点击创建。 4. 打开刚创建的项目，在项目文件中找到manifest.json文件。 5. 在manifest.json文件中填写你的H5项目地址。 6. 进行基本配置，根据你的需求进行设置。 7. 在SDK配置中，可以配置项目的appid、key和其他相关配置，比如定位功能的配置。 8. 填写完所有配置后，点击发行，选择云打包。 9. 等待云打包完成，HbuilderX会给出一个下载链接。 10. 点击下载链接，下载生成的安装包。 11. 将安装包安装到手机上，即可打开H5 APP。 以上是使用HbuilderX打包H5 APP的简要步骤，具体的操作细节可以参考HbuilderX的官方文档或者相关教程。 #### 引用[.reference_title] - *1* [hBuilderX将小程序打包成h5](https://blog.csdn.net/weixin_33974433/article/details/91454803)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [HbuilderX打包app，Hbuilder怎么打包app，H5打包成app，H5怎么打包成app](https://blog.csdn.net/LIUAWEIO/article/details/88719446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [HBuilderX H5 app打包以及加入个推](https://blog.csdn.net/zwx19921215/article/details/102918090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值