相信我谷歌浏览器是浏览器里绝对最好的，想用好浏览器一定要知道这20个有用的扩展程序。

1.CSS查看器

CSS Viewer是一个简单但非常有效的 Web 开发者 Chrome 扩展。顾名思义，无论您将鼠标悬停在何处，此插件都会向您显示给定页面的 CSS 属性。将出现一个小的弹出窗口，向您显示构成您指向的元素的 CSS 数据。

无论您是想创建简单的 WordPress 主题还是现代和复杂的主题，这都是一个非常智能的扩展，可以在您将鼠标指向的任何地方轻松识别关键 CSS 属性。

2.字体

WhatFont对于需要识别网页上使用的字体的开发人员来说是一个非常有用的 Chrome 扩展程序。它快速、有效，并且可以在几秒钟内识别页面中的单个字体。它还标识了家庭、大小、重量和颜色。所有这些都在浏览器的一个小弹出窗口中。

3.Fonts Ninja

Fonts Ninja以与 WhatFont 类似的方式来识别网页中的字体。如果 WhatFont 出于任何原因不适合您，这是一个有用的选择。它的工作原理几乎相同，但界面更小。否则，这两个扩展的外观和感觉非常相似。

安装扩展程序，您应该会在工具栏中看到一个小的绿色忍者图标。在 Chrome 中打开网页，选择图标，然后将鼠标悬停在您要识别的字体上。您应该会在突出显示的字体上看到一个页面概览弹出窗口和一个单独的弹出窗口。简单但非常有效。

4.页面标尺 Redux

Page Ruler Redux是一个 chrome 扩展，可让您查看网页上任何元素的宽度、高度和位置。? 这对于优化您的网站以获得更好的可读性非常有帮助。此外，Page Ruler Redux 提供了键盘快捷键，可以轻松浏览您的网页。

5.CSS 窥视器

CSS Peeper允许您检查网站上使用的整个调色板。您可以以视觉上吸引人的方式查看所有这些列表，以便您找到它们。

CSS Peeper是为设计师量身定制的 CSS 查看器。使用 Chrome 扩展程序访问有用的样式。使命是让设计师专注于设计，并尽可能少地花时间挖掘代码。

6.窗口调整器

Window Resizer对于 Web 开发人员来说是一个非常有用的 Chrome 扩展。它简单但非常有效，尤其是在使用响应式设计或应用程序时。它会安装到 Chrome 中，并将您正在使用的任何屏幕调整为一系列流行的屏幕尺寸。Window Resizer 等扩展有助于开发在桌面和移动设备上看起来很棒的响应式网页设计。

涵盖了最常见的尺寸、移动设备、平板电脑、台式机，并且仿真似乎非常准确。这里的人经常使用 Window Resizer 并对其评价很高。这对我们来说已经足够了！

7.浏览器堆栈

BrowserStack是另一个对 Web 开发人员非常有用的 Chrome 扩展。与 Window Resizer 一样，此扩展程序允许您测试您的工作的响应能力。此扩展程序允许您使用不同的浏览器进行测试，而不是不同的屏幕尺寸。

安装扩展程序，在 Chrome 中打开您的页面，选择 BrowserStack 并从选项卡中选择一个设备选项。然后将使用该设备上的浏览器仿真来呈现该页面。简单但非常有效。不过，您确实需要一个 BrowserStack 帐户才能使其正常工作。

8.像素设置

此扩展程序可帮助您以像素完美的准确性开发您的网站！

PerfectPixel允许开发人员和标记设计人员在已开发的 HTML 顶部放置一个半透明的图像叠加层，并在它们之间进行像素完美的比较。

9.Githunt

如果您在 GitHub 上花费大量时间寻找新项目，Githunt非常有用。这个 Chrome 开发者扩展不依赖于 GitHub 的趋势项目提要，而是通过在浏览器的新选项卡区域中突出显示所有趋势项目，从而将其脱颖而出。

您可以搜索不同语言的项目，并阅读简短的项目描述和当前打开的问题数量。然后，您只需在选项卡中选择项目即可转到该项目并进一步检查它。如果您喜欢为新项目做出贡献，这是一个非常有用的小扩展。

10.Wappalyzer

Wappalyzer是一个非常有效的工具，用于识别网页背后的底层技术。它可以快速识别 Web 服务、CMS 类型、分析工具、插件、JavaScript 库和大量其他应用程序。如果您想知道页面背后的秘密，这是找出答案的一种方法。

只需安装扩展程序，在页面上选择它，就会出现一个弹出窗口，突出显示该页面上运行的所有可识别应用程序。

11.Web Developer ChecklistWeb 开发人员清单

分析任何网页是否违反最佳实践。此扩展可帮助 Web 开发人员轻松发现网站中的问题区域。

12.Site Palette网站调色

生成调色板的免费浏览器扩展。设计师和前端开发人员必备的工具。抓取任何网站的颜色。

• 免费的站点调色板 API 可用！
• 支持多个调色板生成器
• 已创建可共享链接
• 预览调色板图像可供下载
• 下载自动生成的草图模板
• 添加了 Adob?e Swatch 支持
• 玩转colors.co的调色板
• 在 Google Art Palette 微调调色板
• 添加了打印样式：打印出调色板或将调色板保存为 PDF

13.GoFullPage

GoFullPage是一个浏览器扩展程序，可以截取您在浏览器中查看的整个网页的屏幕截图。当您单击扩展程序图标时，扩展程序会向下滚动，并且在当前页面上，您正在浏览器中查看，将每个滚动窗口组合成一个显示在新选项卡中的图像。

14.Check My Links

Check My Links是一个链接检查器，它可以抓取您的网页并查找损坏的链接。它是主要为网页设计师、开发人员和内容编辑器开发的扩展。

当您编辑一个包含大量链接的网页时，能够快速检查页面上的所有链接是否正常工作不是很方便吗？这就是“检查我的链接”的用武之地。

该扩展程序可以快速找到网页上的所有链接并为您检查每个链接。它突出显示哪些是有效的，哪些是坏的，就这么简单。

您可以一键将所有坏链接复制到剪贴板！

15.Lorem Ipsum 生成器

Lorem Ipsum Generator是最好的 Chrome 扩展之一。它的功能正如其名称所暗示的那样。它为演示网站生成填充文本并且做得很好。

只需安装扩展程序，在页面中选择它，告诉它您要生成多少 Lorem Ipsum 副本，然后从窗口中复制它。将其粘贴到您的页面中，您就完成了。

16.企业 Ipsum

Corporate Ipsum是 Lorem Ipsum Generator 的流行替代品。如果您的客户对占位符文本更加挑剔，或者您想增加商业网站的感觉，那么这就是您来的地方。这个 Chrome 开发者扩展会生成 lorem ipsum，但带有企业风格。

它也很像 Lorem Ipsum 生成器。安装扩展程序，打开您的页面，选择图标并告诉它要生成多少副本。复制并将其分页到位并移动到下一个。这是一种生成更多面向业务的占位符文本的快速、简单的方法。

17.React Developer Tools

React Developer Tools专门用于开源 React JavaScript 库。如果您使用 React，此扩展可帮助您根据需要检查库。

安装扩展程序，您应该会在 Chrome 工具栏中看到两个图标。一个用于组件，另一个用于 Profiler。组件向您显示 React 在页面上使用的内容，而 Profiler 向您显示性能数据。如果您使用 React，这是必不可少的工具！

18.EditThisCookie

EditThisCookie是一个对开发人员非常有用的 Chrome 扩展。它使您能够按页面编辑、删除、创建和保护 cookie。它还允许您将它们导出以进行分析、阻止它们、将它们导入 JSON，并且通常可以对 cookie 执行尽可能多的操作。

最有用的工具是搜索和读取 cookie 的能力。开发人员会发现大多数工具在某一时刻很有用。

19.UX Check

UX Check是一个可用性分析器，它使用 Nielsen 的 10 个启发式方法来评估页面。它可以快速突出潜在的可用性问题，并使您能够添加注释、截屏并导出准备在团队中共享的发现。

UX Check 是一种非常有效的方式来执行轻量级用户测试，而不需要过多的细节。在交付项目进行全面测试之前作为第一次通过测试的理想选择。

20.Checkbot检查机器人

Checkbot它检查页面的链接、错误、安全性、性能、搜索引擎优化和一系列其他注意事项。这是一个非常有用的工具，可以添加到您的曲目中，并且对于发布前的最后一遍非常有用。

这20个扩展工具前端开发人员很有用，也有一些专门适用于狭窄领域的工具。可以让您的工作更轻松。无论是通过提高生产力、解决问题还是简化流程，这里都有工具可以完成所有这些事情，甚至更多。

外贸中需要用到的有效插件

1.利用gmail账号先注册个人长期有效账户

2.打开应用商城Snovio,邮箱地址查找工具， 添加到谷歌账号拓展程序

3.首页进入后 添加领英客户开发工具，按照提示步骤 解压到某一固定文件夹 注意不能移动与删除，为了后续有效使用

4.谷歌工具中 扩展程序 解压后添加 – 利用开发者模式 根据客户的网站 及谷歌信息提取有效邮箱

5.最后固定在右侧工具栏中 ，就能借助 Snov.io领英客户开发工具Chrome 扩展程序， 可以轻松地在LinkedIn上找到任何客户的邮箱地址，并一次收集多个潜在客户页面以及他们的所有个人资料信息

6.左侧有单个邮箱搜索 大量邮箱搜索 域名搜索等

目标客户的网址复制到 域名的搜索

出现公司的详细信息 及相关人员的邮箱及账号， 需要提取部分采购邮箱 忽略公共邮箱

或者点击单一个人邮箱 加注后验证是否有效。再给客户发邮件 避免不必要的时间浪费掉了。

01

货兜国际物流平台还在愁找不到客户？教你用谷歌开发客户的8大技巧

对外贸人来说，利用Google、Yahoo等国外搜索引擎开发客户是一个非常好的途径，但是搜索引擎搜索出来的东西太多了，如果不掌握一些技巧的话，会浪费很多时间、错过很多唾手可得的商机。下面总结一下利用Google等国外搜索引擎开发客户的方法和技巧。

Google+海关数据开发客户

用过海关数据的人，就会发现数据中不一定都有联系方式、有的联系方式也不一定是采购及决策人的，而且其中的一些采购商也不一定是目标客户……这就需要我们用Google等搜索引擎对数据进行验证，进而找到更多我们需要的信息。需要用Google验证和分析的信息有：客户的背景（是否是我们的同行）、客户的性质（零售商、经销商还是importer）、客户主营产品的材质是否和我们出口产品的材质一致（材质供需不对等，也不是目标客户）、客户所在公司的关键决策人及其邮箱信息（可通过Google+LinkedIn or Facebook去锁定）。

02

最可怕的是，你没订单还不懂玩谷歌开发

怎么搜索客户邮箱？

入门级搜索方法：产品+公共邮箱后缀 ，比如你想筛选出 handbag 的 gmail 邮箱数据，那么你可以在搜索引擎输入 handbag "@gmail.com" ,你还可以输handbag "@hotmail.com",handbag "@aol.com"…

除了常用的@yahoo.com、@hotmail.com、@aol.com、@gmail.com邮箱之外，你还可以使用一些其他国家的公共邮箱，比如：

印度的@vsnl.com

巴基斯坦的@cyber.net.pk

阿曼的@omantel.net.om

意大利的@libero.it

南非的@webmail.co.za

新西兰的@xtra.co.nz

新加坡的@pacific.net.sg

公共邮箱有很多，大家平时可以多留意多总结。

03

带你玩转谷歌地图工具，帮你开发大量客户。

在搜索之前，第一步就是要分析你的行业关键词，你要输入的关键词是要保证搜索出来的是目标客户，而不是你的同行。

比如我是卖汽车零件的，那么我面对的买家肯定是一些汽车工厂或者一些修汽车零件的，那么我就先进行城市定位，随便选择一个地点纽约，再输入关键词"auto parts"，选定范围是50公里，点击搜索，就可以搜索出我的目标客户群体。

04

别再说找不到客户了，谷歌自主开发客户的方法赶快get起来

首先，很多业务员不知道谷歌搜索的思路是什么，只是为了开发客户而开发，没有了解使用谷歌的真正目的。

大部分人都把“主动找客户”和“客户找我们”的概念给混淆了。简单来说谷歌搜索主动去开发客户是我们以通过关键词和人工搜索找到目标客户，精准找到行业里面重要的联系人方式。而大家平时通过B2B平台和官网SEO等等让客户更好的找到我们。

所以，当我们有了这些思路之后，就会明白你在网上看到的Google开发客户方法：

行业或产品关键词+邮箱后缀行业

或产品关键词+buyer行业 或

产品关键词+importer

05

如何用谷歌找客户

谷歌是全球知名的搜索引擎，也是众多搜索引擎中功能最强大的。外贸人经常会用谷歌来找客户，但是他们对此知之甚少，往往只会用一两种方法在谷歌上找客户。今天，我就来介绍一下用谷歌找客户的各种方法。

1、产品名+importer(s)：你可以在搜索框中输入“产品名称+importer”或“产品名称+importer”，importer是进口商的意思，加上s就是复数形式，也是可以的。这样，你就能搜索到对你们的产品的有采购需求的客户。

2、产品名称+其他名词：这里的其他名词指的是importer的同义词或近义词，比如buyer（买家）、wholesaler（批发商）、retailer（零售商）等等。因为客户所在的公司形式不同，所以也就衍生出来了这些词汇。

06

如何利用Google开发客户?方法大合集

一. 谷歌图片开发客户 上图右上角的Image为谷歌图片搜索入口：谷歌图像搜索功能可以帮助我们找到潜在目标客户，特定市场产品偏好和售价以及终端客户对于该产品的评价。

Step1: 下面我们用sofa举例，在谷歌搜索栏输入 ''sofa''，我们可以看到以下页面；

Step2: 点击其中一个产品我们可以看到：网站链接 产品名称 售价 终端客户评价

击左下角我要做外贸~，把握数字化外贸机遇，让您的好货走向世界

我要做外贸～

网页会加载资源、运行 JS、渲染界面、存储数据等，我们开发时怎么看到执行的状态呢？用调试工具 chrome devtools。它支持 dom 调试、JS debugger、本地存储的展示、运行时间的 profile 等。

Node.js 也是同样，不过它只支持 JS debugger 和 profile。我们可以通过 chrome devtools 或者 vscode debugger 等来调试。

这些工具都是远程 attach 到运行的程序上来调试的，之间怎么交互数据呢？通过 webSocket。而且还制定了 chrome devtools protocol 的协议，规定了有什么能力，如何通信。

这种基于 websocket 的调试协议叫做 chrome devtools protocol。因为功能比较多，所以分了多个域（一般复杂的东西都会分域），包括 DOM、Debugger、Network、Page 等等，分别放不同的调试协议。chrome devtools 就是通过这个协议实现的调试。

新版 chrome（金丝雀版）可以打开设置中的实验特性的 Protocol Monitor 面板。

图片

就可以看到传输的 CDP 数据：

图片

这就是 chrome devtools 的原理。

理解了这个原理有什么用呢？

我们可以重新实现服务端，只要对接了调试协议，那么就能够用 chrome devtools 来调试。

比如 kraken（把 css 渲染到 flutter）是怎么做到用 chrome devtools 调试 dom 和样式的？就是对接了这个协议。

我们可以重新实现客户端，只要对接了这个协议，那就可以用任何工具调试网页/Node.js。

大家用 chrome devtools 可以调试 Node.js 和网页，用 vscode debugger 也可以，用 webstorm debugger 也可以。为什么呢？因为它们都对接了这个协议。

那我们是不是可以对接这个协议实现一个类似 chrome devtools 的调试工具呢？

我们来实验下：

我们启动 chrome，通过 –remote-debugging-port 指定调试端口：

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary –remote-debugging-port=9222

然后连上它。

这里我们不用直接对接协议，chrome 提供了各种语言的 sdk，调用 api 就行：

图片

我们先连接上 chrome：

const CDP = require('chrome-remote-interface');

async function test() {

let client;

try {

client = await CDP();

const { Page, DOM, Debugger } = client;

//…

} catch(err) {

console.error(err);

}

}

test();

然后打开 baidu.com，等 2s，做个截图：

const CDP = require('chrome-remote-interface');

const fs = require('fs');

async function test() {

let client;

try {

client = await CDP();

const { Page, DOM, Debugger } = client;

await Page.enable();

await Page.navigate({url: 'https://baidu.com'});

await new Promise(resolve => setTimeout(resolve, 2000));

const res = await Page.captureScreenshot();

fs.writeFileSync('./screenshot.jpg', res.data, {

encoding: 'base64'

});

} catch(err) {

console.error(err);

}

}

test();

查看下效果：

图片

这样，我们就跑通了 CDP 的第一段代码。

其余的功能，包括 Network、Debugger、DOM 等等也能实现，我们简单试一下：

await DOM.enable();

const { root } = await DOM.getDocument({

depth: -1

});

depth 为深度，设置为 -1 就是返回整个 dom：

图片

有了这些数据我们是不是可以做 DOM 的浏览呢？

还有 DOM.setAttributeValue 可以设置属性、DOM.getBoxModel 拿到盒模型大小等。

基于这些，我们做个 dom 编辑器没问题吧。

还有网络部分:

await Network.enable();

Network.on('responseReceived', async evt => {

const res = await Network.getResponseBody({

requestId: evt.requestId

});

console.log(evt.response.url);

console.log(res.body);

});

我们通过 responseReceived 事件监听每一个响应，然后再通过 Network.getResponseBody 拿到响应的内容：

图片

图片

基于这些，我们实现 Network 面板的功能没问题吧。

还可以对接 profiler：

await Profiler.start();

await new Promise(resolve => setTimeout(resolve,2000));

const { profile } = await Profiler.stop();

图片

有这些数据，我们就可以通过 canvas 画出个火焰图出来。

理论上来说，chrome devtools 的所有功能我们都能实现。而且，一个网页同时用多个调试工具调试是可以的，因为 websocket 本来就可以有多个客户端。

图片

可能你会说自己实现 chrome devtools 有什么意义？

大家自己做开源前端项目的时候，一般都是写个网易云音乐客户端，因为有现成的数据可以用。那为什么不做个 chrome devtools 呢？也有现成的数据啊，启动浏览器就行，而且这个逼格多高啊。

我们也不用实现完整的 chrome devtools，可以单把网络部分、单把 DOM 部分、单把 debugger 部分实现了，可以做不同的 UI，可以做 chrome devtools 没有的功能和交互。

比如你面试可视化岗位，你说你对接了 chrome devtools protocol 的 profiler 部分，用 canvas 画了个火焰图，会加分很多的。

总结

Chrome 的调试是通过 WebSocket 和调试客户端通信，制定了 Chrome Devtools Protocol 的协议，Node.js 也是，不过协议叫做 V8 debugger protocol。我们可以通过 protocol monitor 的面板看到所有的 CDP 协议请求响应。

可以实现 CDP 服务端，来对接 chrome devtools 的调试功能，调试不同的目标，比如 kraken 渲染引擎。

可以实现 CDP 客户端，来用不同的工具调试，比如 vscode debugger、webstorm debugger 等。

我们也可以通过 sdk 的 api 来和 CDP 服务端对接，拿到数据，实现调试的功能。比如单独实现 DOM 编辑器、Network 查看器、JS Debugger、 Profiler 和火焰图都可以，而且可以做到比 chrome devtools 更强的功能，更好的交互。

当大家想做开源项目没有数据的时候，不妨考虑下做个 CDP 客户端，这不比云音乐项目香么？

作为一名两年多的 Web 开发作家，我加入了许多 Web 开发社区，以便及时了解趋势。我遇到的最常见的对话一直是关于如何简化 Web 开发过程。

一些程序员正在寻找可以让他们编写更少代码的工具，而另一些程序员则需要帮助以加快测试速度。因此，我决定写一篇博客文章，介绍可帮助您做到这一点的顶级 Web 开发工具。

但是，如果我必须详细提及前端和后端工具，一篇博文是不够的。我将在下一篇文章中介绍后端工具。目前，这里是五个最有用的前端 Web 开发工具，它们将使您能够以更少的钱创造更多的东西。

Atom——更快的代码编辑

无论您是初出茅庐的开发人员还是老手，您都需要一个高性能的代码编辑器来提高编码过程的效率。

Atom目前是 Web 开发生态系统中最好的代码和文本编辑工具之一。它由 GitHub 推出，因此归微软所有。它最好的部分是它是完全开源的，您可以将它用作构建 Web 应用程序的集成开发环境 (IDE)。

除了具有查找和替换文本/文件等功能外，Atom 还被开发为在编码过程中为自动完成提供智能建议。

Atom 非常易于使用，并且支持跨平台开发。Atom 的唯一缺点是，如果您想在其中编写包，则需要使用CoffeeScript。

Chrome DevTools——用于更快的调试

Chrome 开发者工具是最著名的网络开发工具之一，可帮助您直接在 Chrome 浏览器上测试和调试网页。不仅如此，这些工具还可以帮助您编辑网页的样式和 DOM。

值得一提的两个特殊功能是设备模式和源面板工具。Chrome DevTools 中的设备模式可帮助您测试网页或网站的响应速度。另一方面，“源”面板使您能够执行许多任务，例如查看页面文件、调试 JavaScript 代码、创建JavaScript 代码段以及设置工作区以进行文件共享和编辑。

但是，请注意 Google Chrome 每六个月更新一次功能。因此，如果您想充分利用 Chrome DevTools，请确保您随时了解他们的所有新升级。

Bootstrap——用于定制的 CSS 和 UI 开发

Bootstrap可以说是全球最受欢迎的前端 UI 框架，并且已经保持了四年多。它实际上是一个完整的 UI 工具包，可让您快速设计移动优先网站。Bootstrap 由 HTML 和 CSS 设计模板组成，用于许多 UI 元素，如排版、框、标签、按钮等。

Bootstrap 的主要优点是它的可定制性，它吸引了大量 Web 开发人员的注意。Bootstrap 中的所有网格、组件和布局都非常容易定制。无论 Web 应用程序的类型如何，在 Bootstrap 网格中偏移和嵌套列也很容易。

我有没有提到在新网站和现有网站上集成 Bootstrap 是多么简单？此外，您可以利用许多第三方工具通过 Bootstrap 自定义您的 UI。

Bulma——用于简单的 CSS 和 UI 开发

就像 Bootstrap 一样，Bulma也是一个带有预构建组件的前端 UI 框架。但是，当您想使用 Bulma 时，无需任何 CSS 知识即可立即开始。所以这是一个巨大的优势。

Bulma 非常易于使用，如果您使用 Bulma 构建一个，它会创建非常轻量级的 CSS 文件。它基于 Flexbox，这意味着您只需点击几下即可为您的网站创建响应式列。

我喜欢 Bulma 的地方在于它为构建网站 UI 提供的灵活性。Bulma 带有模块化架构，因此您只需使用和处理网站中所需的元素。如果您刚刚开始 Bulma 项目，则无需熟悉框架的每个功能。

Svelte — 用于构建比传统 Web 应用程序运行速度更快的现代 Web 应用程序

自 2018 年推出以来，Svelte一直是一个革命性的组件框架。虽然大多数传统框架（如 Vue 和 React）在浏览器上完成大部分工作，但 Svelte 采取了相反的方法。

当您使用 Svelte 进行前端 Web 开发时，代码会在构建时自行编译。因此不需要Virtual DOM diffing，应用程序性能大幅提升。

当然，JavaScript、HTML 和 CSS 是 Svelte 的一些主要组件。它们可以在框架工具包中以.svelte 文件的形式找到。最好的部分？这些组件在 Svelte 中没有样板文件，因此您可以通过编写更少的代码行来完成大量工作。

就像其他前端框架一样，Svelte 可以与其他工具和技术集成，以尽可能少的工作量构建美观、高效的 Web 应用程序 UI。

Web 开发工具可以真正帮助您提高工作效率

这些和其他前端 Web 开发工具在开发人员社区中广受欢迎，因为它们可以轻松构建 Web 应用程序。

虽然 Atom 非常适合代码和文本编辑，但在调试方面没有什么比 Chrome Devtools 更好的了。Bootstrap 和 Bulma 是非常有用的框架，可以使用其预先构建的设计组件创建用户友好的网页设计。最后，Svelte 以一种革命性的方法进入了 Web 开发领域，以解决前端框架应该如何工作。

最后，Web 开发工具为您提供了一个随时可用的结构，或者至少是组件，从而消除了从头开始构建一切的需要。这可以为您的生产力创造奇迹。