IT瘾chrome推荐

chrome 插件开发指南（Manifest V3） - 掘金

Thu, 30 Mar 2023 20:33:50 CST

一、什么是 Chrome插件

1.1 概述

严格来讲，我们正在说的东西应该叫 Chrome 扩展（Chrome Extension）,真正意义上的 Chrome 插件是更底层的浏览器功能扩展，需要对浏览器源码有一定掌握才有能力去开发。鉴于 Chrome 插件的叫法已经习惯，本文中也全部采用这种叫法。在百度指数里也没有收录“chrome 扩展”这个词，只有“chrome 插件”。

Chrome 插件是一个用 Web 技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

另外，其实不只是前端技术，Chrome 还可以配合 C++ 编写的 dll 动态链接库实现一些更底层的功能（NPAPI），比如全屏幕截图等。

由于安全原因，Chrome 浏览器42以上版本已经陆续不在支持 NPAPI 插件，取而代之的是更安全的 PPAPI。

1.2 Chrome 插件是如何工作的

扩展是基于诸如 HTML、 JavaScript 和 CSS 之类的 Web 技术构建的。它们运行在一个独立的沙箱执行环境中，并与 Chrome 浏览器进行交互。

从图中可以看出，存在三个进程： 扩展进程（Extension Process）、 页面渲染进程（Render Process）、 浏览器进程（Browser Process）。
1）扩展进程中运行Extension Page，Extension Page主要包括backgrount.html和popup.html：

backgrount.html中没有任何内容，是通过background.js创建生成，当浏览器打开时，会自动加载插件的background.js文件，它独立于网页并且一直运行在后台，它主要通过调用浏览器提供的API和浏览器进行交互；
popup.html则不同，它有内容，是一个实实在在的页面，和我们普通的web页面一样，由html、css、Javascript组成，它是按需加载的，需要用户去点击地址栏的按钮去触发，才能弹出页面。

2）渲染进程主要运行Web Page,当打开页面时，会将content_script.js加载并注入到该网页的环境中，它和网页中引入的Javascript一样，可以操作该网页的DOM Tree，改变页面的展示效果；
3）浏览器进程在这里更多起到桥梁作用，作为中转可以实现Extension Page和content_script.js之间的消息通信。

1.3 延伸阅读：插件和扩展的区别

扩展（Extension）指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发。比如著名的 AdBlock plus。

插件（Plug-in）指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，工作在内核层面，理论上可以用任何一种生成本地二进制程序的语言开发，比如C/C++、Delphi等。比如Flash player插件，就属于这种类型。一般在网页中 object 或者 embed 标签声明的部分，就要靠插件来渲染。

从安全性上来看，由于插件一般实现的都是比较底层的功能，所以一旦出现问题，往往就会牵涉到整个操作系统，像 Flash 就属于经常被扒出高危漏洞的那一类。相比较之下，扩展出现问题，其危害性往往类似于浏览器漏洞。不过 Chrome Extension 在为用户带来便利的同时，也的确带来了不少安全问题，即便是在 Chrome 应用商店中的应用也不能保证绝对安全，Google 自己也下线过一些有安全隐患的扩展。

二、Chrome 插件能做什么

扩展允许你通过使用 API 修改浏览器行为和访问网页内容来“扩展”浏览器。
扩展 API 允许扩展的代码访问浏览器本身的特性: 激活选项卡、修改网络请求等等。

插件能力概述：

		API
自定义扩展用户界面	控制一个扩展的显示的图标	Action
	添加触发操作的键盘快捷键	Commands
	添加页面右键菜单	Context Menus
	向地址栏添加关键字功能	Omnibox
	创建新标签卡、书签页或历史记录页	Override Pages
	在工具栏中动态显示图标。	Page Actions
构建扩展工具	无障碍扩展服务	Accessibility (a11y)
	有趣的事情发生时，做出检测和反应	Service Workers
	使用语言和语言环境	Internationalization
	获得OAuth2访问令牌	Identity
	管理已安装和正在运行的扩展插件	Management
	通过 Content Script 与其父扩展进行通信	Message Passing
	让用户自定义扩展	Options Pages
	修改一个扩展的权限	Permissions
	存储和检索数据	Storage
修改和监听 Chrome 浏览器	创建、组织和操作书签行为	Bookmarks
	从用户的本地配置文件中删除浏览数据	Browsing Data
	以编程方式启动、监视、操作和搜索下载	Downloads
	管理 Chrome 的字体设置	Font Settings
	与浏览器访问页面的记录交互	History
	控制 Chrome 的隐私特性	Privacy
	管理 Chrome 的代理设置	Proxy
	从浏览会话查询和还原选项卡和窗口	Sessions
	在浏览器中创建、修改和重新排列选项卡	Tabs
	访问用户访问次数最多的 URL	Top Sites
	更改浏览器的整体外观	Themes
	在浏览器中创建、修改和重新排列窗口	Windows
修改和监听网页	扩展临时访问当前活动选项卡的权限	Active Tab
	自定义网站特性，如 cookies、 JavaScript 和插件	Content Settings
	在网页上下文中运行 JavaScript 代码	Content Scripts
	浏览和修改浏览器的 Cookie 系统	Cookies
	使用 XMLHttpRequest 从远程服务器发送和接收数据	Cross-Origin XHR
	在不需要许可的情况下对页面内容执行操作	Declarative Content
	捕获屏幕、单个窗口或选项卡的内容	Desktop Capture
	将选项卡的源信息保存为 MHTML	Page Capture
	与标签页互动媒体流交互	Tab Capture
	接收 in-flight 导航请求状态的通知	Web Navigation
	提供规则告诉 Chrome 如何拦截、阻止或修改 in-flight 的请求。	Declarative Net Request
打包、部署和更新	使用 Chrome Web Store 托管和更新扩展	Chrome Web Store
	在指定的网络或其他软件上分发扩展	Other Deployment Options
扩展 Chrome DevTools	测试网络交互，调试 JavaScript，修改 DOM 和 CSS	Debugger
	为 Chrome 开发工具添加功能	Devtools

几个插件例子：


Google 翻译	Adblock Plus	Artemis and Britomartis	Octotree - GitHub code tree)

一句话总结： Chrome扩展插件是用前端的技术栈，来定制浏览器的功能，改善用户体验。

三、主要构成

一个chrome插件通常由3类文件组成：

配置文件 manifest.json
图片、css等资源文件
js脚本文件，包括popup.js、background.js、content_script.js等

3.1 Manifest.json

每一个扩展都有一个json格式的清单文件，用于配置扩展的名称、版本号、图标、权限、脚本路径等信息；
文件内容如下所示：

      {"manifest_version":3,"name":"MStars","description":"A chrome extension for sgfe","options_page":"options.html","background":{"service_worker":"background.bundle.js"},"action":{"default_popup":"popup.html","default_icon":"master-34.png"},"chrome_url_overrides":{"newtab":"newtab.html"},"icons":{"128":"master.png"},"content_scripts":[{"matches":["http://*/*","https://*/*","<all_urls>"],"js":["contentScript.bundle.js"],"css":["content.styles.css"]}],"web_accessible_resources":[{"resources":["injectScript.bundle.js","content.styles.css","master.png","master-34.png","vs/*"],"matches":["http://*/*","https://*/*","<all_urls>"]}],"permissions":["webRequest","storage","contextMenus","bookmarks"],"host_permissions":["<all_urls>"],"content_security_policy":{"extension_pages":"script-src 'self';object-src 'none'"}}复制代码

3.1.1 Manifest V2

自2022年1月17日起，Chrome 应用商店已经停止接受新的 Manifest V2扩展。
2023年6月 Chrome 115开始，关闭对 Manifest V2扩展的支持。
2024年1月，Chrome 应用商店将删除所有的 Manifest V2扩展。

（Manifest V2 support timeline）

3.1.2 Manifest V3

2020年年底推出V3版本，在安全性、隐私性和性能方面得到了增强；还可以使用更现代的开放 Web 技术，比如 service works和 promises。

Manifest V3 is available beginning with Chrome 88, and the Chrome Web Store begins accepting Manifest V3 extensions in January 2021.

详细文档： developer.chrome.com/docs/extens…

3.2 popup

3.2.1 概述

popup 是点击插件图标时打开的一个页面，点击 popup 之外的区域会收起，一般用来做一些临时性的交互。

（Web Vitals）

3.2.2 简单例子

1、创建 manifest.json 文件：

      {"manifest_version":3,"name":"Hello Extensions","description":"Base Level Extension","version":"1.0","action":{"default_popup":"hello.html","default_icon":"hello_extensions.png"}}复制代码

2、创建 html 文件：

      <html><body><h1>Hello Extensions</h1></body></html>复制代码

点击 action 后，就会看到：

3.3 content-scripts

3.3.1 概述

content-scripts 是在网页上下文中运行的文件。通过使用标准的文档对象模型(Document Object Model，DOM) ，它们能够读取浏览器访问的网页的详细信息，对它们进行更改。

如主题、样式、布局定制、广告拦截等等。

大部分浏览器插件都在围绕 content-scripts 做一些事情，background、popup、options等都为之服务。
配置示例：

      "content_scripts":[{"matches":["http://*/*","https://*/*","<all_urls>"],"js":["contentScript.bundle.js"],"css":["content.styles.css"]}],复制代码

3.3.2 特性

1）和原始页面共享 DOM，但是不能共享 JS，不能访问页面中的 JS（比如变量）。
2）网络请求受到同源策略限制。
3）只能访问以下 Chrome API：

i18n
storage
runtime:
- connect
- getManifest
- getURL
- id
- onConnect
- onMessage
- sendMessage

其他 API 都不能直接访问，但是可以通过通信让 background 来进行调用。

3.3.3 简单例子

在页面中增加一个按钮。

      functioninJectBtn() {if(document.querySelector('#openInIDE'))return;document.querySelector('.repo-detail-base-info .btn-box')
    .insertAdjacentHTML('beforeend','<button id="openInIDE" type="button" class="mtd-btn mtd-btn-warning"><span><div class="mtd-button-content"><span class="mtdicon mtdicon-link-o"></span><span>Open In WebIDE</span></div></span></button>');document.querySelector('#openInIDE').addEventListener('click',() =>{window.open('https://xxx.com/');
  });
}functioninit() {varheartBeat =setInterval(() =>{varwantedEl =document.querySelector('.repo-detail-base-info .btn-box');if(wantedEl) {clearInterval(heartBeat);inJectBtn();
    }
  },1000);
}init();复制代码

3.3.4 延伸阅读：如何访问页面中的 JS

content-scripts 不能访问页面中的 js，它可以操作 DOM，但是 DOM 却不能调用它，所以就有了通过 DOM 操作的方式向页面动态注入 JS 的操作。

      functioninjectJs(jsPath) {
  jsPath = jsPath ||'injectScript.bundle.js';vartemp =document.createElement('script');
  temp.setAttribute('type','text/javascript');// chrome-extension://mapfodeofmlldcgdgahpjiefememgeei/injectScript.bundle.jstemp.src= chrome.runtime.getURL(jsPath);
  temp.onload=function() {// 放在页面不好看，执行完后移除掉this.parentNode?.removeChild(this);
  };document.head.appendChild(temp);
}复制代码

injected 的内容需要在资源列表中进行声明：

      "web_accessible_resources":[{"resources":["injectScript.bundle.js",],"matches":["http://*/*","https://*/*","<all_urls>"]}]复制代码

例子：拦截 xhr 请求。

      // "injectScript.bundle.js"xhook.after(function(request, response) {if(request.url.match(/rest\/api.+files.+/)) {console.log(response?.data)
  }
});复制代码

3.4 background

3.4.1 概述

插件是基于事件的用来修改或增强 Chrome 浏览体验的程序。事件是浏览器触发的，例如导航到新页、删除书签或关闭选项卡。插件在 background 中监视这些事件，然后根据指定的指令进行响应。
background 一旦加载完成，只要执行某个操作（比如发起网络请求或调用 Chrome API）就会一直运行，此外，在关闭所有可见视图和所有消息端口之前，不会被卸载。

总而言之，background 为所有的视图和消息端口服务。

background 在需要的时候被加载，空闲的时候被卸载。一些事件的例子包括:

插件首次安装或者更新版本；

backgroud 正在监听一些事件，这些事件被触发；

content script 或者其他扩展发送消息；

插件中的其他视图调用 runtime.getBackgroundPage

3.4.2 简单例子

创建一个右键菜单。

      functioncreateContextMenus() {
  chrome.contextMenus.create({type:'normal',id:'savePage',title:'保存页面',checked:false,
  });
}
chrome.runtime.onInstalled.addListener(() =>{createContextMenus();
});复制代码

四、其他展现形式

4.1 homepage_url

插件主页，免费广告位！

      {"homepage_url":"https://km.xxxx.com", }复制代码

4.2 Options页面

4.2.1 概述

插件的配置页面。

4.2.2 配置

有两种配置方法，对应两种展现形式。

      {// 方式1"options_page":"options.html",// 方式2 优先级高"options_ui":{"page":"options.html"},}复制代码

4.3 Devtools

开发者工具。

4.4 override（覆盖特定页面）

可以将 Chrome 默认的一些特定的页面改为使用扩展提供的页面：

页面名称	url	配置
新标签页	chrome://newtab	"chrome_url_overrides": { "newtab": "newtab.html" }
历史记录	chrome://history	"chrome_url_overrides": { "history": "history.html" }
书签	chrome://bookmarks	"chrome_url_overrides": { "bookmarks": "bookmarks.html" }

注意点：

不能替换隐身模式下的新标签页；

一个插件只能覆盖一个页面。

4.5 Omnibox

Chrome和其他浏览器相比一个最大的区别就是地址栏——其实不仅仅是地址栏，而是一个多功能的输入框，Google将其称为omnibox（中文为“多功能框”）。我们熟悉的一个功能就是用户可以直接在omnibox搜索关键字，Chrome也将omnibox开放给开发者，这使得omnibox更加强大。

五、通讯

由于 content script 运行在网页的上下文中，而不在扩展中，因此它们通常需要某种方式来与扩展的其余部分进行通信。

从浏览器插件内的视角来看通讯：

5.1 简单的一次性请求

5.1.1 从 content-scripts 发起请求

      chrome.runtime.sendMessage({greeting:"hello"},function(response) {console.log(response.farewell);
});复制代码

5.1.2 发送消息到 content-scripts

      chrome.tabs.query({active:true,currentWindow:true},function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting:"hello"},function(response) {console.log(response.farewell);
  });
});复制代码

5.1.3 接受消息

      chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {console.log(sender.tab?"from a content script:"+ sender.tab.url:"from the extension");if(request.greeting==="hello")sendResponse({farewell:"goodbye"});
  }
);复制代码

5.2 长链接

可以使用 runtime.connect和 tabs.connect建立一个长链接进行通讯。

      // port1varport = chrome.runtime.connect({name:"knockknock"});
port.postMessage({joke:"Knock knock"});
port.onMessage.addListener(function(msg) {if(msg.question==="Who's there?")
    port.postMessage({answer:"Madame"});elseif(msg.question==="Madame who?")
    port.postMessage({answer:"Madame... Bovary"});
});// port2chrome.runtime.onConnect.addListener(function(port) {console.assert(port.name==="knockknock");
  port.onMessage.addListener(function(msg) {if(msg.joke==="Knock knock")
      port.postMessage({question:"Who's there?"});elseif(msg.answer==="Madame")
      port.postMessage({question:"Madame who?"});elseif(msg.answer==="Madame... Bovary")
      port.postMessage({question:"I don't get it."});
  });
});复制代码

5.3 跨插件通讯

除了在插件中的不同组件之间发送消息之外，还可以使用消息传递 API 与其他插件进行通信。
可以使用 runtime.onMessageExternal和 runtime.onConnectExternal来监听传入的请求和连接。
监听消息：

      // For simple requests:chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {if(sender.id=== blocklistedExtension)return;// don't allow this extension accesselseif(request.getTargetData)sendResponse({targetData: targetData});elseif(request.activateLasers) {varsuccess =activateLasers();sendResponse({activateLasers: success});
    }
  });// For long-lived connections:chrome.runtime.onConnectExternal.addListener(function(port) {
  port.onMessage.addListener(function(msg) {// See other examples for sample onMessage handlers.});
});复制代码

发送消息：

      // The ID of the extension we want to talk to.varlaserExtensionId ="abcdefghijklmnoabcdefhijklmnoabc";// Make a simple request:chrome.runtime.sendMessage(laserExtensionId, {getTargetData:true},function(response) {if(targetInRange(response.targetData))
      chrome.runtime.sendMessage(laserExtensionId, {activateLasers:true});
  }
);// Start a long-running conversation:varport = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);复制代码

5.4 从网页发送信息

插件可以接收和响应来自常规网页的消息。要使用这个特性，必须在 Manifent.json 中指定要与哪些网站通信。
通讯方式和跨插件通讯方式类似。

5.5 Native通讯

Chrome 插件可以与原生应用进行通讯，原生应用可以通过注册一个 Native Messaging Host，Chrome 以一个单独的进程启动 Host，并使用标准输入和标准输出流进行通信。
详情可参考： developer.chrome.com/docs/apps/n…

六、如何查看某个插件的源码

开源的，如 github.com/adblockplus…
本地查看
1. 第一步：打开开发者模式，找到对应插件的id
2. 第二步：本地插件目录，/Users/mac/Library/Application Support/Google/Chrome/Default/Extensions

七、最佳实践推荐

喜欢使用 React + TS：
github.com/chibat/chro…
github.com/lxieyang/ch…
喜欢使用 rxjs：
github.com/alibaba/bro…
不想要任何框架：
github.com/SimGus/chro…

八、适配其他浏览器

切换到 chromium 内核的浏览器适配工作还是比较小的，firefox 也支持 chrome API。

我们只需要对照各浏览器厂商提供的开发文档，关注我们用到的 API 是否有差异，有差异的部分，做一下兼容即可。

可参考各浏览器的 extension 开发文档：

firefox： developer.mozilla.org/en-US/docs/…

Edge： learn.microsoft.com/zh-cn/micro…

360： open.se.360.cn/open/extens…

搜狗： ie.sogou.com/open/doc/

九、发布

chrome开发者中心： chrome.google.com/webstore/de…

firefix发布文档： addons.mozilla.org/en-US/devel…

edge发布文档： learn.microsoft.com/zh-cn/micro…

十、未来

content-sctipts + Mockjs 自动填充表单？
UI检查，自动化测试？
性能、依赖检测，Lighthouse?
账号管理&一键登录？

可以在评论区说说你们用到的场景~~

参考

chrome 插件开发指南(字节跳动技术团队)
Chrome Extension 扩展程序迁移至 Manifest V3
Chromium扩展（Extension）的Content Script加载过程分析
 一种开发 Chrome 扩展程序的新姿势
 Message passing
Native Messaging

Octoman – 微博备份工具，可导出 HTML 文件[Chrome]

Sun, 23 Feb 2020 18:12:29 CST

Octoman 是一款简单易用的 Chrome 扩展，用来备份微博，可导出为 HTML 文件，在浏览器进行浏览，支持备份任意用户微博，需要登录微博。@Appinn

来自发现频道，@ misswell 同学的推荐：

这是一个新浪微博备份工具，Chrome 浏览器插件/扩展。使用方法：在 PC 版新浪微博页面点击扩展图片，选择需要保存的用户，点击保存按钮即可。

首先需要登录微博，然后进入你想备份的微博用户页面，点击扩展栏按钮，再点击保存，就开始下载了：

每 500 条微博会保存为一个 html 文件，保存的信息有微博文字、评论数、转发数、点赞数：

注意，图片可点击，会跳转到微博，而每一条微博下面那个评论和转发，是不能点的。

每备份 500 条，会休息两分钟，以防被微博踢掉封了 IP 就不好玩了。

一些注意事项：

请勿同时保存多个用户，会限制访问
需要登录微博
保存过程中不建议操作微博
每500条微博存为一个 HTML 文件
如想存图到本地，可开打 HTML 文件后右键另存
微博太多会保存不全，因为新浪接口返回暂无微博
保存的文件如果出现 finish 代表已经全部完成

Octoman 官网在这里，Chrome 商店链接，离线包（可用开发者模式安装）。

Chrome 开始启用深层链接技术

Sun, 23 Feb 2020 20:29:00 CST

最近发布的 Chrome 80 激活了 ScrollToTextFragment 功能，它是一种深层链接技术，用户可以通过特定网址直接指定想要分享的文本位置，其他人点击链接可以直接访问相关文本而不只是网址。这项功能去年引发了隐私方面的争议，但 Chrome 团队不管争议实现并启用这一功能。ScrollToTextFragment 功能类似在前往某个网页搜索特定文本，浏览器自动滚动到文本所在位置。这项功能听起来似乎人畜无害，但这意味着网站会对访问者有着更多的了解，它们可以知道你对特定的内容感兴趣，从而推断出你的更多信息，很可能你的个人隐私会因此泄露。

谷歌浏览器Chrome离线包下载

Sat, 13 Apr 2019 12:31:55 CST

由于谷歌浏览器Chrome无法在中国大陆下载，因此提供文件来源于谷歌官方网站的谷歌浏览器Chrome离线包（Windows 10/8.1/8/7 64 位）下载。

下载谷歌浏览器Chrome离线包

Google Chrome是由 Google开发的免费网页浏览器 ^[9]。Chrome是化学元素“ 铬”的英文名称，过去也用Chrome称呼浏览器的外框 ^[10] ^[11] ^[12] ^[13]。Chrome相应的开放源代码计划名为 Chromium ^[14] ^[15]，而Google Chrome本身是非自由软件，未开放全部源代码 ^[9] ^[16]。

Chrome代码是基于其他开放源代码软件所编写，包括 Apple WebKit和 Mozilla Firefox，并开发出称为“ V8”的高性能 JavaScript引擎 ^[17]。Google Chrome的整体发展目标是提升稳定性、速度和安全性，并创造出简单且有效率的用户界面 ^[18]。 CNET旗下的 Download.com网站评出的2008年6月最佳Windows应用程序，其中Google Chrome排名首位 ^[19]。

据 StatCounter统计，截至2018年第一季度，Google Chrome在全球桌面浏览器的网页浏览器的使用分布为66% ^[20]。

Chrome 50结束了对 Windows XP与 Windows Vista系统的支持 ^[21]，这两个系统上的最后版本为49.0.2623.112 ^[22]

B站下载助手 – 地铁族必备，离线缓存 B 站视频 [Chrome]

Tue, 30 Jan 2018 10:18:13 CST

B站下载助手是一款在 Chrome 上辅助下载哔哩哔哩网站视频的工具，只要能播放就能下载，格式为 flv。@Appinn

来自发现频道，作者 @ indooorsman 同样是 Anything to QRcode – 给 Chrome 内容生产二维码[Chrome]、微信备份 – 备份与删除微信、朋友圈、公众号的照片和视频[Android] 的开发者。

B站下载助手是这样描述自己的：

帮助你下载你能在 Bilibili 网站播放的视频（所以前提是你能在网站上播放），适用于某些番剧可以看却不能离线缓存的场景，比如我本人购买了 B 站大会员，能直接看大部分番剧，但还是有很多不能离线缓存，对于地铁族来说很难受。。。所以就做了这个扩展，用来在 PC 上下载这些番剧，然后传到手机上，在上下班路上看。。。希望对大家也有所帮助✧(≖ ◡ ≖✿)

嗯，使用方法如下，请根据步骤来：

0. 安装本扩展（废话。。。
1. 打开你要播放的视频页面，必须是有播放器的那个页面
2. 在页面空白处点击右键，然后点右键菜单中的“检查元素” / “检查”
3. 在弹出的开发者工具中，点击 “B站下载助手”标签，找不到的看扩展的屏幕截图去。。。
4. 然后按“B站下载助手”中的说明操作即可

正常情况下，应该能看到下面的蓝色长条按钮：

然后就可以下载了，下载后的格式为 flv。

而在手机端，能够播放 flv 的播放器，比如 VLC、 MX Player、 nPlayer 等等常见的播放器都可以播放。

Chrome 商店 | ChromeFor（可直接下载 .crx 扩展文件）

12款堪称神器的 Chrome 插件，Max 你的工作效率！

Tue, 16 Jan 2018 08:47:32 CST

导语：好的工具插件是提高程序员生产力的法宝，本文介绍了 12 款Chrome 插件，非常高效实用，还附带下载地址，果断收藏~

文/ ABHIMANYU GHOSHAL

译/ 蛤佛-1

来源/ TNW

工欲善其事，必先利其器，程序员的日常工作根本就 离不开 Chrome 浏览器（还不知道的请面壁思过130s）！其他功能优达菌就不啰嗦了，今天来说说 Chrome 如何提高你的生产力—— Chrome 支持 大量扩展插件，能帮你短时间内完成更多工作，同时比一些 App 消耗更少的系统资源。

今天介绍 12个 Chrome 插件，不用关闭浏览器你就能：记笔记，规划日程，改善你的收件箱，Max 你的工作效率。 （注：这些插件在Opera 里也能使用）

写作与笔记类

无论你在准备报告，撰写文章还是听讲座，准备一款能随时上手的记笔插件，肯定有所帮助！

用来记笔记和待办事项的

Google Keep

推荐理由：

Google Keep 快速，轻便，完全符合快速工作节奏的需求—— 只需点击浏览器上的按钮即可快速添加笔记。

相对于 Evernote 和 Microsoft OneNote，我更喜欢 Keep：它不那么混乱，让我能专注于快速记下想法，而不是提供一大堆用于排版和外链的功能。

这并不意味着 Keep 只有这一个特点：它能帮你保存页面上的图像和文字，你还能在上面作笔记。如果你打算写点什么，你可以随时打开，记下文本、列表和提醒。

Keep 的 Panel view 功能很受我的青睐，我可以开着标签页的同时，建个小窗放在旁边。

➤ Google Keep 获取链接：https://chrome.google.com/webstore/detail/panel-view-for-keep/jccocffecajimkdjgfpjhlpiimcnadhb

用来头脑风暴的

Papier

推荐理由：

Papier 是个超级简单的记笔记工具， “随时待命”是它能胜过各种桌面应用的原因。

只要装上插件、打开一个新的标签页，一个即时记事本就出现在你面前。图能自动保存内容，支持基本的排版和快捷键。界面简洁明快，你能看到的就是一个空白页面，随时响应你的笔记和新想法，界面太刺眼的话还有夜晚模式可供选择。

因为它只是个单页的笔记本，没有文档储存功能，所以感觉更像是一个瞎记记思路的地方，而不能保存和检索单独的文档。 Papier 还提供基本的富文本格式，你可以用快捷键启动，转向基于 Web 的文本编辑器。

虽然看起来功能轻便，但由于几乎隐形的界面，Papier 追求的就是让你把想法即时呈现出来。当你需要头脑风暴、快速记下稍纵即逝的想法的时候，就显得很有用，看着浏览器就能记笔记。

➤ Papier获取链接：https://www.google.com/search?q=Papier&oq=Papier&aqs=chrome..69i57j69i60&sourceid=chrome&ie=UTF-8

任务管理类

有一大堆任务等着完成？不如在浏览器里列张表，一天下来你就能很方便的看到完成情况。

用来准备短事项的

Jot

推荐理由：

“新标签页”是众多插件的必争之地，Jot 就是其中又简单又好看的一种。每当你打开一个标签页时，它会显示一个漂亮的壁纸，还会让你用大字报列出今天的 To-Do list 和备注，每次打开空白标签页就能看到。

如果你不需要各种高级任务管理的功能，Jot 是你的不二之选。

➤ Jot 获取链接：https://chrome.google.com/webstore/detail/jot/mnemjleajnmodijhnibpekloajfdjjja

用来规划一天的

Momentu

推荐理由：

Momentum 为你的新标签页加了一些有用的小部件，可以帮你方便地规划日程、实现目标。

上面有时钟、当地天气、To-Do list 和一个自定义的快捷链接，背景图多到你看不过来。

界面中的所有元素都可以根据自己的喜好进行调整。最牛逼的是“focus”小部件，看到没，能在图片的 good afternoon 下面，显示你一天的主要目标。

每月支付 2 美元的话可以得到更多的自定义功能，比如同步 Todoist 和 Wunderlist 等各种应用，“foucus” 还能学会从你的 To-Do list 里抽选任务来显示。

➤ Momentum 获取链接：https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en

用来安排任务的

Todois

推荐理由：

如果你常用 Chrome，但还没有一个默认的 To-Do list 管理器，不如试试Todoist 。它在浏览器工具栏里内置一个强悍的任务列表，在方寸之间提供大量功能。

对于新手，你可以简单地添加任务或将活动选项卡变为列表里的项目。它会让你设置优先级，并为每个待办事项设定到期时间或重复规律。接下来七天你的日程安排就会优雅地出现在你面前。

在同一个地方添加和浏览待办事项的功能，比起 Wunderlist 为每个功能都要加一个插件的方法做得要好， Todoist 还能通过 Zapier 与大量应用联动，把任务添加到 Google 日历，给 Slack 里的加星标消息设为待办事项。

➤ Todoist 获取链接：https://chrome.google.com/webstore/detail/todoist-to-do-list-and-ta/jldhpllghnbhlbpcmnajkpdmadaolakh?hl=en

用来掌控项目的

Taco

推荐理由：

如果你已经用过好几个 APP 来管理任务和项目，Taco 的新标签替换功能足以让他笑傲群雄。

和Taco联动的应用有：Wunderlist，印象笔记，Asana，Basecamp和Trello，你可以把所有的项目放进新标签页里，然后在不用打开各个应用的前提下，就可以在 “Up Next” 表里拖拽项目来优化。

它强在能按项目过滤任务，但也能像普通 To-Do list 一样简单地使用。我喜欢用Taco 的原因在于能让我工作摸鱼两不误。

➤ Taco 获取链接：https://chrome.google.com/webstore/detail/taco/aogabobfbepcehdkbfagdflinolncebh?hl=en

阅读与研究类

网络上充斥着各种有用没用的信息，没一会儿就迷失在里面。不如用这些工具充分利用时间，读读书，好好研究研究。

用来扫一眼文章的

Reading Tim

推荐理由：

Time 会在浏览器左上角显示要花多上时间阅读页面上的内容，这对于判断是马上扫一遍还是收藏以后再读是非常有用的。

如果你想研究点东西，想知道应该先读那几篇文章，这款插件能帮你迅速找到文章的主题要点。

Reading Time 默认人均阅读速度为 228 字每分钟，但为了结果准确，你得先在Staples 做个1分钟测试，然后在插件选项里输入你的阅读速度。

➤ Reading Time 获取地址：https://chrome.google.com/webstore/detail/reading-time/nccohhimobidpghgpnejnbkpoichbbml?hl=en

用来稍后阅读的

Pocket

推荐理由：

如果你偶然发现一篇有趣的文章，但没时间看，那可以用Pocket保存以后再读。

只要点击工具栏上的按钮或者按 Ctrl/Cmd+Shift+S，你正在浏览的页面就会被加到阅读队列中。有空的时候就可以打开 Pocket 的 web 应用和 APP，在没有其他干扰的情况下阅读。

如果 pocket 里的东西越来越多，你也可以装个 TimeToRead ：它给每篇文章加个 tag，显示得花多少时间来阅读这篇。

这可以帮你根据你有多少摸鱼时间来挑选阅读的内容，或者通过时间长短来排个序。有些人要读的东西越堆越多，它能帮你好好地整理一下阅读列表。

➤ Pocket 获取链接：https://chrome.google.com/webstore/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj?hl=en

用来速读的

Reedy

推荐理由：

当你时间紧急又得迅速熟悉一篇文章的时候，你就得速读内容。Reedy 可以让你选择页面上任意一段文章段落，然后在他清爽的界面上阅读。

要知道，信息过载是非常现实的问题，Reedy无疑能帮你弱化信息量。当我被冗长的电子邮件和新闻稿轰炸时，Reedy能让我大致浏览一遍，决定是否得花时间跟进处理。如果你经常需要阅读大量内容，他值得一试。

➤ Reedy 获取链接：https://chrome.google.com/webstore/detail/reedy/ihbdojmggkmjbhfflnchljfkgdhokffj

用来总结文章的

Highly

推荐理由：

这款插件通过高亮文本精华的方式来梳理一篇文章。在你选好文章重点、分享给朋友后，他们只会看到你选定的部分，同时会有数字显示你为他们节约了多少时间。

这个功能不只局限于分享：我后来发现，他能用于在文章或者播客里标记来源。我所作的高亮都被保存下来，可以随时检索，甚至在Pocket和Instapaper账户里得以显示。

➤ Highly 获取链接：https://chrome.google.com/webstore/detail/highly-highlighter/hjpahjhcglfdopbholajmhpamgblhjhg?hl=en

书签和搜索类

用来重新发现需要的在线资源的

Refind

推荐理由：

关于书签页的工具真是太多了，你换台电脑可能就忘了浏览器里都收藏了啥。Refind的出现就是为了解决这个问题。

他能把书签页保存在云端，你google搜到相关内容时他们也会被高亮出来，妈妈再也不用担心我一篇文章收藏个好多遍啦。

➤ Refind 获取链接：https://chrome.google.com/webstore/detail/refind/dlapbpopbcangbnjdhajdlanbfokjaja?hl=en

用来追踪页面变化的

Page Monitor

推荐理由：

RSS 阅读器可以聚合你关注的博客，但如果你想收到更新的实时提醒，你就得用用 Page Monitor 了。

这款插件需要你把想跟的页面加到列表里，然后他就会持续关注更改情况，如果有新内容放上来，他就会“叮”地一声提醒你。

作为一名记者，我用 Page Monitor 来快速跟进科技新闻——你也可以用它来追踪股票和汇率，产品发布和销售情况等。扩展的导出功能特别方便，我可以一次性把我看的网站地址分享给同事。

➤ Page Monitor 获取链接：https://chrome.google.com/webstore/detail/page-monitor/ogeebjpdeabhncjpfhgdibjajcajepgg?hl=en

以上就是 12 款能提高生产力的强悍 Chrome 插件。如果你试了一些，想必你再也不会离开他们，可能顺便还卸了几个多余的桌面 App。 在评论区告诉优达菌你最喜欢用的插件是什么吧！

— 完 —

无法连接 Google 服务，如何「曲线救国」顺畅使用 Chrome

Fri, 01 Sep 2017 18:38:39 CST

对于没有自备梯子的用户，由于无法连接 Google 服务器，在使用 Chrome 时都面临不少问题：

Chrome 浏览器更新总是出现「检查更新时出错」；
看到好用的扩展但是无法下载；
不同设备之间的 Chrome 浏览器无法同步个人数据。

所以不少人转而使用国内厂商开发的软件管家之类工具，或者直接选择常年不更新，或者放弃使用了 Chrome 浏览器。

那么，我为大家准备了这样一份 Chrome 使用指南，「曲线救国」实现顺畅使用 Chrome 浏览器、扩展和数据同步的目的，带大家告别「常年不更新、不同步、不备份 Chrome」的尴尬难题。

哪里能找到靠谱的 Chrome 离线安装包？

推荐两个在线网站服务：浏览迷、 getchrome 下载地址查询服务，其中「浏览迷」会及时跟进 Chrome 浏览器正式版的更新内容，其中报道文章会有浏览器版本更新的内容和下载地址，网站给出的下载地址均为可直接下载的真实地址，同时网站还有一个小工具就是 Chrome 内核浏览器内核及版本检测，定期在线检测一下你的浏览器正式版是不是最新版本。

而「getchrome 下载地址查询服务」相当适合尝鲜用户，网站最主要的作用就是定时检测 Chrome 是否有更新，已经覆盖了 Stable、Beta、Dev、Canary 更新通道以及 32/64 位版本，号称提供了 Google 官方离线包，建议大家对照自己电脑安装的版本选择 https 的下载链接，并且网站提供了每一个版本号、文件大小、查询时间、SHA1、SHA256 认证。

除了 Chrome 商店还有哪能下载扩展？

Chrome 最大的特色之一就是其支持大量的扩展程序， Chrome 网上应用商店是目前唯一的官方分发渠道，但不少用户由于并不理想的网络环境，无法通过官方渠道下载 Chrome 扩展，推荐一个第三方的 Chrome 扩展网站： Crx4Chrome。

与官方商店相比，Crx4Chrome 给出的数据信息更加全面，热门扩展排行、热门应用排行、最新扩展等不同形式的排行榜，帮助用户发现自己需要的 Chrome 扩展。

在这里，为大家补充如何通过 Crx4Chrome 下载扩展和安装扩展。

方法一：

1. 通过搜索找到需要的扩展，介绍页面中提供了 Crx4Chrome 下载地址或者外链至 Chrome Store 官方商店，大家也可以看到扩展的的运行截图、功能介绍、评分、下载总数的信息；

2. 点击扩展介绍页面中的「Install」之后，就会自动转到下载页面，Crx4Chrome 提供了多个下载源，推荐大家下载 Crx4Chrome 提供的官方源，下载后会得到 .crx 格式的文件；

3. 打开 Chrome，输入网址 chrome://extensions/ 或者点击右上角的目录图标，设置 - 更多工具 - 扩展程序，把刚才下载的 crx 格式文件拖拽到扩展程序界面，这时会提示安装。

方法二：

1. 在方法一第二步中，将 .crx 文件的扩展名改为 .rar 或 .zip，然后解压；

2. 在 Chrome 地址栏输入 chrome://extensions/，勾选「开发者模式」，点击「加载已解压的扩展程序」，选择上一个步骤解压出来的扩展所在文件夹。如果出现加载扩展程序时出错，将解压文件中的 _metadata 文件夹的名字修改为 metadata（即把下划线去掉）。

怎么在本地备份和恢复已经装好的 Chrome 扩展？

备份扩展

1. Chrome 地址栏输入 chrome://extensions/ 选择开发者模式后，单击 打包扩展程序，可以看到一个 扩展程序根目录输入框页面；

2. 进入入 C:/Users/ /AppDataLocal/GoogleChrome/User Data/Default/Extensions (<username>是电脑的用户名称)目录下，会看到许多以 id 号命名的文件夹，这些文件夹就是 Chrome 安装的扩展，进入 id 目录，会看到一个版本号目录。如下：

  C:/Users/<username>/AppDataLocal/GoogleChrome/User Data/Default/Extensions/aapbdbdomjkkjkaonfhkkikfgjllcleb2.0.6_0

3. 复制第二步的 版本号目录文件路径到第一步中弹出输入框页面的扩展 程序根目录,点击 打包扩展的按钮，就可以在 id 目录下找到对应的 .crx 格式扩展和密钥文件。同理，把所有的 id (即 Chrome 扩展)手动备份。

恢复已备份的扩展

恢复扩展这部分与上面介绍通过 Crx4Chrome 下载扩展和安装扩展的部分保持一致，大家可以在 chrome://extensions/扩展页面，点击「加载已解压的扩展程序」或者拖拽 .crx 文件手动进行扩展安装恢复。

怎么在本地备份书签 & 个人设置？

备份书签

Chrome 本身已经提供了书签导出导入功能，在浏览器地址栏输入网址 chrome://bookmarks/或者打开设置 - 书签 - 书签管理器，可对书签以 HTML 文件进行导入或者导出的操作，再配合云端存储服务，可方便实现书签跨平台、跨设备保存和同步。

如果喜欢可视化书签管理的话，可安装扩展 Speed dial 2，提供了可视化书签、数据统计打开网站习惯，甚至还有 Speed Dial 2 帐户体系，方便云端同步。

备份个人文件

诚然，Chrome 自家的同步功能是最为全面，可同步的数据类型包括了应用、自动填充、书签、扩展程序、历史记录、密码、设置、主题背景和壁纸、打开的标签页、Google Payments 中存储的信用卡和地址信息。

目前，用户手动备份个人文件的具体操作：

1. 在 Chrome 地址栏输入 chrome://version/，回车键进入页面，大家可以看到当前浏览器的相关信息，重点就是 个人资料路径显示的文件路径。

2. 复制第一步的 个人资料路径，在本地随意一个文件夹窗口的地址栏粘贴并打开上面的地址，将会看到大量 Chrome 浏览器产生的文件夹和文件。默认的 Chrome 的配置文件夹被直接命名为 Default，完整的路径类似： C:/Users/<username>/AppDataLocal/GoogleChrome/User Data/Default

如果用户创建了多个 Chrome 用户的话，则会有额外的配置文件，将以 Profile N （N 代表从 1 开始的数字）的方式来对配置文件夹命名。

3. 备份方式很简单，重装系统之前将目录拷贝出来，重装系统之后再将目录恢复回去就可以了。

怎么查看和备份 Chrome 保存的密码？

用户每次登陆某个网站服务的时候，Chrome 都会提示是否保存密码，方便以后登陆的时候不再需要手动填写用户名、密码。 如何查看 Chrome 保存过的密码？

在 Chrome 地址栏输入 chrome://settings-frame/passwords 回车打开密码页面，页面显示了已保存的密码和一律不保存的网站列表，点击其中保存密码的网站，会有显示的按钮，点击之后会弹出请输入电脑系统本身设置好的密码（为了安全起，建议大家设置系统的用户账号密码），即可直接看到密码。

导出和导入密码

1. Chrome 地址栏输入 chrome://flags/#password-import-export，打开页面

2. 显示位置会自动定位到「Password import and export」选项，默认状态是 Default，手动选择 Enabled，Chrome 将会自动提示更改会在重新启动浏览器时生效，点击立即重新启动。

3. 回到前面提到的 chrome://settings-frame/passwords 密码页面，新增了导入和导出选项。Chrome 将以 .csv 格式文件导出密码信息，内容包括了 name、url、usename、password。

第三方查看备份密码的工具

第三方工具 ChromePass 可以让用户查看 Chrome （对 Firefox、 Vivaldi 等浏览器同样有效）已存储的用户名称和密码，这款工具会显示出以下信息：来源地址（Origin URL）、生效地址（Action URL）、用户名称字段、密码字段、用户名称、密码、密码强度、密码创建时间以及密码保存的文件路径。

我们可以选择一个后者多个项目，选择以 txt、html、xml 格式文件或者直接复制到剪贴板上，即可完成对 Chrome 存储密码的查看和备份工作。与 Chrome 浏览器本身查看密码时需要输入系统管理员密码不同，ChromePass 支持直接显示密码内容。

希望这份使用指南帮助「守法公民」做好各种 Chrome 数据类型的查看和备份工作。当面临不同平台和设备之间的数据同步、Chrome 新版安装包如何下载的难题时，透过这篇文章大家都可以从容应付。

Chrome 将停止支持 PNaCl ，拥抱 WebAssembly

Wed, 31 May 2017 14:43:27 CST

Chrome 从 2013 年开始支持 PNaCl（Portable Native Client），为开发者提供了一种技术去构建高性能的 Web 应用，但这项技术只有 Google 支持。源自 Mozilla Asm.js 项目的 WebAssembly 技术则得到了所有浏览器开发商的一致拥护： Chrome 和 Firefox 已经原生支持 WebAssembly，Edge 和 Safari 也在预览版中加入了 WebAssembly 支持。在这一背景下，Google 决定停止支持 PNaCl。Chromium 官方博客宣布，在 2018 年第一季度移除对 PNaCl 的支持，表示 WebAssembly 生态系统更适合高性能 Web 应用。Google 发布了帮助开发者将现有的 PNaC 实现迁移到 Web 平台的指南。

Google推出Chrome 56，强化了安全且页面重载速度快28%

Sat, 28 Jan 2017 14:33:02 CST

就当是过春节吧，值此辞旧迎新之际，Google 推出了稳定版的了新版浏览器Chrome 56。新版Chrome支持Windows、Mac、Linux以及Android等多个版本，新增功能特性包括会对收集密码或信用卡号但不采用HTTPS协议的网站向用户发出警告；改进了页码重载的性能和效率；以及为开发者准备的大量新功能。

随着安全威胁的越来越严重，Google Chrome把很大的精力都用在了强化安全上面。其最主要的举措之一就是引导网站优先采用加密的HTTPS协议。HTTPS协议会对数据包进行加密，被认为是降低内容注入等安全风险的必要步骤。每次升级Chrome几乎都朝这个方向更进一步。这次在Chrome 56中，浏览器会将收集密码或信用卡号的HTTP网页在地址栏标记为“不安全”。而在此前版本的Chrome只会用绿色的“安全”标签注明所访问网站使用的是HTTPS协议，并用中性色图标表示网站并未使用HTTPS。此前Mozilla的Firefox 51也已经采取了类似的做法，这两种浏览器未来的目标都是让所有的网站都用上HTTPS协议。你可以看到Chrome对此的步步紧逼：Google的下一步将是把“不安全”标签的颜色改为醒目的红色。

Chrome的第二大改进是加快页面重载速度。通常页面重载时需要对web服务器进行检查以确定缓存的资源仍然有用（该过程被称为验证）。而这个对某页面的验证过程往往需要发出数百项涉及数十个域名的网络请求，对于移动设备来说这尤其是一项沉重的负担。但这次经过改进后，页面重载的速度将可提高28%，而验证请求的数量则会降低60%。

实际上Chrome的这一项改进是应Facebook的要求而进行的。Facebook提交的数据显示，相对于其他的浏览器，Chrome提交的验证请求是别人的3倍多。页面重载一般是用在页面容易加载失败的场合，但现在用户感觉页面内容过时的时候也会经常重载。为了改善后一种情况，Chrome现在仅验证主要资源后就继续正常的页面加载，最大化了缓冲资源的重用，而时延、耗电和数据用量因此也会变低了。

除了安全和性能更新外，Chrome 56 还为开发者准备了一大堆的新功能。比如Android、Chrome OS以及Mac版的Chrome增加了对Web Bluetooth API的支持。开发者只需几行JavaScript代码即可让网站与打印机、LED显示屏等低功耗蓝牙设备建立连接。

此外，Chrome现在也支持CSS粘性定位了。粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。粘性定位可以解决令人头疼的滚动事件的侦听与处理。

更多的功能更新与安全补丁可参见官方博客。用户可直接通过Chrome内置的默认升级程序更新到最新版本，或者直接到google.com/chrome下载。

Chrome的占有率达到55%

Mon, 07 Nov 2016 23:08:31 CST

Google Chrome 浏览器的市场占有率已两倍于微软的 IE 和 Edge 之和，6个月前恐怕没人能想到这一趋势。6个月前，Chrome的市场占有率达到41.66%，首次超过了IE的41.36%，如今它达到 54.99%，而 IE 和 Edge 则萎缩到了 28.39%，Firefox 仍然停留在11%左右。Chrome 的占有率在一年内飙升了31.12%，微软虽然试图用 Edge 取代 IE，但情况却是更多的用户流失到了Chrome。

Google Chrome v42.0.2311.135 正式版发布

Wed, 29 Apr 2015 16:34:13 CST

谷歌浏览器 Chrome Stable 稳定版迎来例行升级，新版本号为 v42.0.2311.135，本次更新了安全补丁及问题修正！Google Chrome，又称 Google 浏览器，是个由 Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的界面。

Google Chrome v42 更新了什么？

新增海量应用扩展和 Web 平台 API
大幅提升软件性能和稳定性
“生命、宇宙以及万事终极答案”（根据道格拉斯·亚当斯的小说《银河系漫游指南》，42 是“生命、宇宙以及任何事情的终极答案”。因此，42 也经常被用来向这一作品致敬。——维基百科）
内置 Adobe Flash Player 已更新至 17.0.0.169，另外 Chrome 42 已正式停止对 NPAPI 插件的支持，现在默认安装仅支持 5 款 PPAPI 插件。

64 位版 Google Chrome 有什么区别？

64 位 Chrome 能更好地利用当今的硬件，并且对速度、安全性、稳定性进行了改善！

速度：64 位 Chrome 能利用最新的处理器和编译器优化、更现代的指令集、更快的调用协议，从而实现了速度大提升，尤其是在图形和多媒体内容方面，性能提升 25%。

安全性：Chrome 能够利用最新的 OS 功能，例如 Windows 8 的 High Entropy ASLR，64 位 Chrome 在安全性上也实现了大幅提升。

稳定性：Google 还在 32 位 Chrome 的基础上增强了 64 位 Chrome 的稳定性，尤其是，渲染器处理中的崩溃率大大降低，是 32 位 Chrome 的一半。

Google Chrome 稳定版官方本地下载地址：

Google Chrome v42.0.2311.135 32 位版离线包： http://dl.google.com/chrome/win/8E219F321F3A3148/42.0.2311.135_chrome_installer.exe

Google Chrome v42.0.2311.135 64 位版离线包： http://dl.google.com/chrome/win/C8131634722774D9/42.0.2311.135_chrome64_installer.exe

Google Chrome 稳定版官方原版带更新功能： http://pan.baidu.com/s/1qWPshOC

本文链接

Chrome推动Web的应用化

Tue, 28 Apr 2015 10:52:25 CST

如果你是一名正在建构新项目的开发者，你选择的是应用还是网站？应用程序和网站都有各自的优缺点。网站易于访问，而应用则需要在应用商店搜索、检查权限要求、下载、安装，如果不满意则卸载。网站只需要输入一个网址，不喜欢就离开。应用程序的优点是粘性更强，用户可能从此不再访问一个网站，但安装在设备上的应用则会通过推送通知把用户拉回来。

Google上周发布的Chrome 42，试图在应用和Web之间架起一座桥梁。Chrome 42引入了两个新API——Push API和Notifications API，允许网站向用户推送通知，即使页面已经关闭。Chrome团队的开发者Alex Komoroske和Owen Campbell-Moore说，他们曾为此特性询问了知名的Web开发者，收获了比他们预计的更多的正面评价。目前采用推送功能的网站包括了Beyond the Rack、eBay、Facebook、FanSided、Pinterest、Product Hunt和VICE News，但它们都还没有正式将该功能推送给用户。Chrome团队也知道该功能有可能会被滥用，他们为用户提供了尽可能多的控制。如果讨厌推送通知，可以在设置——网站设置——通知里选择中关闭该功能。Google不希望这项功能只有Chrome一家浏览器提供，它正与Mozilla密切合作，并希望让它变成W3C标准。目前推送通知系统完全依赖于Google Cloud Messaging (GCM)服务， Google表示它正与Mozilla和IETF合作标准化服务器通信，使之适用于非Google方案。

cnBeta 已经入驻豌豆荚啦，扫描左侧的二维码就可以在豌豆荚关注我们。
豌豆荚，一个最懂应用的应用商店，发现无数好应用。

Chrome采用新压缩算法提升网页加载速度降低数据流量消耗

Wed, 20 Jan 2016 22:27:29 CST

谷歌Chrome浏览器很快就会提升网页加载速度并且降低数据流量消耗，这要归功于公司引进的Brotli压缩算法。Brotli压缩算法始于去年九月。谷歌声称和使用已经达到3年时间的Zopfli算法相比，它可以将数据压缩率继续提升26%，谷歌表示，Brotli还可以帮助降低移动设备的电池使用量，达到省电目的。

据谷歌表示，Brotli是一个全新的数据格式，在包装中容纳更多数据，而解压缩速度和其他算法大致相同。如果你希望现在就用上Brotli压缩算法，那么可以下载 Chrome Canary版（谷歌用于测试新功能的浏览器）。

Chrome移动端用户破10亿：web不死，或将消灭App

Thu, 21 Apr 2016 21:55:00 CST

今天，谷歌Chrome迎来50版升级，移动端用户破10亿大关。而在2010年，《连线》杂志刊文称：Web已死。

在那篇封面报道中，《连线》总编辑克里斯·安德森（Chris Anderson）说，这是一个App的时代，到处流行的都是Web大势已去，App才是王道。在《Web已死》文章中，克里斯·安德森说从诞生到现在，万维网（World Wide Web）已经走过了20多个年头。相比当年的流行，如今它已经开始衰落，逐渐让位于更简单且时髦的服务，这些服务更关注的不是搜索，而是获取。我们正在逐渐抛弃开放而自由Web，寻找更加简单、时髦、用起来更舒服的服务，这丝毫不亚于我们当初对它的喜爱之情。

几乎在同一时候，Roy-Chowdhury Rahul接管Google的Chrome团队。“我清楚地记得‘Web已死’这篇文章，”他回忆道。“那时我想：‘噢天啊，那我岂不是做了一个异常错误的决定？’”勿庸置疑，他是不认同这个说法的。但是，当中确实有一些真知灼见。虽然说当时web差点没有死，但也处于和app的艰难较量当中。然而，六年之后的今天，Roy-Chowdhury相信，web正准备复兴，哪怕如今全球越来越多的互联网用户从桌面转移至移动端。为什么他能如此自信呢？

为了证明他自己的观点，Roy-Chowdhury表示，目前日益流行的移动版Chrome浏览器就是很好的说服点。今日，谷歌宣布，由于过去 5个月内新增2亿用户，该公司的Chrome浏览器在移动端的月活跃用户已超过10亿——这意味着，移动端的用户已经和桌面和笔记本终端的用户数相当。

谷歌在2012年6月推出Chrome浏览器移动端运用，Roy-Chowdhury介绍称，经过六年的努力，谷歌和业界都极大地提高了web的底层技术，来让浏览器的服务能够在多种情况下都比得上app，并且超越app。“web需要适应移动。这是一个艰难险阻的过程，但它确实已经做到了。我们做到了。”

web老矣，尚能饭否？

就像之前的克里斯·安德森那样，Roy-Chowdhury举出这么多例子都只是为了达到自己的目的。尽管他他骄傲地指出，Chrome的移动用户与桌面端的一样多，他也没有透露他们为此付出多少的代价。而且可以肯定的是，app仍旧占优。根据互联网市场调研公司comScore的数据，在美国，app的使用时间占据用户手机使用时长的90%。甚至有人依旧坚持“web已死”的论调。

但Roy-Chowdhury指出，web仍将会是当今互联网时代的重要部分，包括手机。引用自己的研究以及comScore数据，摩根士丹利指出，在排名前五十的功能应用中，移动浏览器的用户是app用户的两倍有多，而且在过去的两三年里保持快速地增长。

但这仍然改变不了人们在app上停留更多时间这个事实。而且，随着app的市场不断增长——当我们越来越难去分辨手机上的app，企业也越来越难以凭借一个新的app去吸引用户——唯有古老而平等的web可以提供一个可行的办法。对于Roy-Chowdhury和其他所有人来说，移动web将被证明是特别重要的，尤其随着互联网继续在全球的不断扩张，比如印度和印尼。印度移动电子商务网站Flipkart副总裁Amar Nagaram表示：“那时，人们就不必须安装一个app。”

这不是一个关于宗教的讨论。也许——是有那么一点。但这不仅仅是关于人们就是为了坚守web的观点。未来的希望是，web可以在移动设备上完成它曾在桌面端的变革：提供一个简单易行的途径，来帮助建设丰富的在线服务，并且将他们传送于整个互联网。所以说，它并没有死。

进步的Web应用程序

天气预报公司The Weather Company有一款智能手机app，它像其他公司那样充满对互联网的愿景。不过，最近几年该公司的app访问用户不断增长。根据该公司负责web的副总裁Sheri Bachstein所言，目前手机和平板的web流量占据50%的份额。是的，该公司有各种各样的app，但移动web成为其与用户联通的最重要方式。

该公司如今还推出了一个谷歌所说的“先进的web应用”。基本上说，这是一个网站，但表现得更像一个本地应用。用户可以通过浏览器访问，但随着深入的访问，它能够串流到更多的服务内容上。

在这样一个先进的web应用上，您可以设置推送通知，方便知悉新的内容何时到达。而最方便的，还是你可以通过直接是Google搜索页面直接快速访问各应用的内部内容，这就是Google移动搜索串流技术的高明之处。

据Chrome产品经理Alex Komoroske解释，这种web应用的访问速度接近一个本地app——60帧每秒——而且得益于服务人员，网络拥堵时也不会出现内容中断。而更重要的是，在你的使用习惯之下，它还可以不断扩张。你访问和回访之间，它就变成了一个类似于集合多个网站内容的工具。

Google去年11月表示，Chrome每天处理22亿页面加载，发送通知超过3.5亿个。而六个月之后的今天，这两个数字分别上升至133亿和93亿。

将网络带到第三世界

确实，在印度， Flipkart正在寻求更大规模的利益收入。如今，大部分印度民众都还在使用非智能手机，用着低速的2G网络。那么，一个web应用就可以让他们快速访问到需要的服务，而不必浪费时间和流量来下载一个本地应用，比如Flipkart。

根据Flipkart的数据，其web应用67%的流量来自2G网络，平均每人每次访问时间约为3分半终，而以往使用网页时，客户停留的时间不过70秒。自从该公司推出了web应用，客户转换率以及停留时间提升了70%。

这是很具有讽刺意味的。在过去的一年中，移动web的阻碍是因为它不能像本地应用那样可以承担很多东西。但对于FlipKart来说，移动web是更有益处的——因为小而美——至少在某些方面来说是这样。移动web的话，FlipKart需要的数据是本地应用的三分之一，而这也是更适合2G网络的原因。

未来的融合

曾经供职于沃尔玛实验室的Nageram的表示，移动web才是未来——不仅在印度，而且是所有地方。“本地应用和web将融为一体。”

他承认，美国并不会像印度那样面临诸多硬件和设施的限制，但是作为一个群英荟萃的地方——包括人才和流行应用，移动web可以提供一个更加美好、平等的环境。“终极目标是消灭App Store。”

这似乎是遥不可及的未来。即使Chrome已经利用服务人员以及其他措施来解决了许多移动web的问题，其他家的浏览器却并未能够短期内做到。Nageram的说法却比“web已死”要科学得多。事实上，app和web并非互相排斥，我们都会使用它们，而且，现在web的应用比以往任何时候都活跃。

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

Tue, 14 Jul 2015 19:06:11 CST

对于 Adobe 来说，这两天应该是挺不开心的。先是 Facebook 的首席安全官 Alex Stamos 在 Twitter 上公开说：Adobe，你真的应该对 Flash 做个了断了，黑客通过 Flash 已经偷窃了多达 400 GB 的缓存文件。接着 Firefox 的主管也表示将在 Firefox 浏览器中默认禁用所有版本的 Flash。

这些消息出来之后，Twitter 上的用户和媒体基本都是一副拍手叫好的姿态。比如 Engadget 说的是 Flash 接连遭到了 Facebook 和 Mozilla 的炮轰、抵制；而 Twitter 用户 @zaid 则表示：如果你是一个在意你的用户的广告展示商，那么你应该立刻停止接受 Flash 广告。

做出这种举动的其实不止 Firefox。在今年 4 月份，当苹果发现 Flash 的安全性问题后，就在更新 OS X 的网页插件遮蔽系统时禁用了所有旧版 Flash 插件。在 2014 年时，苹果也曾经有过类似的举动，由于当时 Adobe 根本就没能发布任何更新，所以也就等于 Flash 直接被苹果屏蔽了。

当 Firefox 和 Safari 都在用类似的方法抵制 Flash 时，Chrome 浏览器却和 Flash 紧紧地捆绑在一起。按照 Google 的说法，Flash 被直接集成在 Chrome 中并且处于默认开启的状态。

现在，Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯。

在互联网界，除了 Flash 之外，好像没有谁会像它这样经常沦为众人一起责难的对象。当乔布斯在 2010 年公开指责 Flash 时， Adobe 的 CEO Shantanu Narayen 还会出来回应一下苹果的指责，并大谈自己坚信多平台的应用程序将受到消费者欢迎之类的。而现在，Adobe 基本上是一副破罐子破摔的姿态。毕竟现实情况是：所有的 Flash 版本都有安全漏洞，而他们却没法立刻给出一个可行的解决方案。

当然，虽然 Firefox 和苹果都曾经禁用过 Flash，但用户其实也是自行手动开启的，而且在 Adobe 更新了安全的版本后，这些公司基本上也会更改之前的禁令规则。不过，即便这样，对于既不安全又耗电的 Flash，大家还是能离的远点就离的远点吧。

Chrome开发者工具之JavaScript内存分析

Fri, 13 Mar 2015 08:00:04 CST

内存泄漏是指计算机可用内存的逐渐减少。当程序持续无法释放其使用的临时内存时就会发生。JavaScript的web应用也会经常遇到在原生应用程序中出现的内存相关的问题，如泄漏和溢出，web应用也需要应对 垃圾回收停顿。

尽管JavaScript使用垃圾回收进行自动内存管理，但有效的(effective)内存管理依然很重要。在这篇文章中我们将探讨分析JavaScript web应用中的内存问题。在学习有关特性时请确保尝试一下相关案例以提高你对这些工具在实践中如何工作的认识。请阅读内存 101(Memory 101)页面来帮助你熟悉这篇文章中用到的术语。 注意：我们将要用到的某些特性目前仅对 Chrome Canary版浏览器可用。我们推荐使用这个版本来获得最佳的工具，以分析你的应用程序的内存问题。

你需要思考的问题

总体来说，当你觉得你遇到了内存泄漏问题时，你需要思考三个问题：

我的页面是否占用了过多的内存? - Timeline内存查看工具(Timeline memory view) 和 Chrome任务管理(Chrome task manager) 能帮助你确认你是否使用了过多的内存。Memory view 能跟踪页面渲染过程中DOM节点计数，documents文档计数和JS事件监听计数。作为一个经验法则：避免对不再需要用到的DOM元素的引用，移除不需要的事件监听并且在存储你可能不会用到的大块数据时要留意。
我的页面有没有内存泄漏? - 对象分配跟踪(Object allocation tracker)通过实时查看JS对象的分配来帮助你定位泄漏。你也可以使用堆分析仪(Heap Profiler)生成JS堆快照，通过分析内存图和比较快照之间的差异，来找出没有被垃圾回收清理掉的对象。
我的页面垃圾强制回收有多频繁? - 如果你的页面垃圾回收很频繁，那说明你的页面可能内存使用分配太频繁了。 Timeline内存查看工具(Timeline memory view) 能够帮助你发现感兴趣的停顿。

术语和基本概念

本小节介绍在 内存分析时使用的常用术语，这些术语在为其它语言做内存分析的工具中也适用。这里的术语和概念用在了堆分析仪(Heap Profiler)UI工具和相关的文档中。

这些能够帮助我们熟悉如何有效的使用内存分析工具。如果你曾用过像Java、.NET等语言的内存分析工具的话，那么这将是一个复习。

对象大小(Object sizes)

把内存想象成一个包含基本类型(像数字和字符串)和对象(关联数组)的图表。它可能看起来像下面这幅一系列相关联的点组成的图。

一个对象有两种使用内存的方法：

对象自身直接使用
隐含的保持对其它对象的引用，这种方式会阻止垃圾回收(简称GC)对那些对象的自动回收处理。

当你使用DevTools中的堆分析仪(Heap Profiler，用来分析内存问题的工具，在DevTools的”Profile”标签下)时，你可能会惊喜的发现一些显示各种信息的栏目。其中有两项是： 直接占用内存(Shallow Size)和 占用总内存(Retained Size)，那它们是什么意思呢？

直接占用内存(Shallow Size，不包括引用的对象占用的内存)

这个是对象本身占用的内存。

典型的JavaScript对象都会有保留内存用来描述这个对象和存储它的直接值。一般，只有数组和字符串会有明显的直接占用内存(Shallow Size)。但字符串和数组常常会在渲染器内存中存储主要数据部分，仅仅在JavaScript对象栈中暴露一个很小的包装对象。

渲染器内存指你分析的页面在渲染的过程中所用到的所有内存：页面本身的内存 + 页面中的JS堆用到的内存 + 页面触发的相关工作进程(workers)中的JS堆用到的内存。然而，通过阻止垃圾自动回收别的对象，一个小对象都有可能间接占用大量的内存。

占用总内存(Retained Size，包括引用的对象所占用的内存)

一个对象一但删除后它引用的依赖对象就不能被 GC根(GC root)引用到，它们所占用的内存就会被释放，一个对象占用总内存包括这些依赖对象所占用的内存。

GC根是由 控制器(handles)组成的，这些控制器(不论是局部还是全局)是在建立由build-in函数(native code)到V8引擎之外的JavaScript对象的引用时创建的。所有这些控制器都能够在堆快照的 GC roots(GC根) > Handle scope 和 GC roots > Global handlers中找到。如果不深入了解浏览器的实现原理，在这篇文章中介绍这些控制器可能会让人不能理解。GC根和控制器你都不需要过多关心。

有很多内部的GC根对用户来说都是不重要的。从应用的角度来说有下面几种情况：

Window 全局对象 (所有iframe中的)。在堆快照中有一个distance字段，它是从window对象到达对应对象的最短路径长度。
由所有document能够遍历到的DOM节点组成的文档DOM树。不是所有节点都会被对应的JS引用，但有JS引用的节点在document存在的情况下都会被保留。
有很多对象可能是在调试代码时或者DevTools console中(比如：console中的一些代码执行结束后)创建出来的。

注意：我们推荐用户在创建堆快照时，不要在console中执行代码，也不要启用调试断点。

内存图由一个根部开始，可能是浏览器的 window对象或Node.js模块 Global对象。这些对象如何被内存回收不受用户的控制。

不能被GC根遍历到的对象都将被内存回收。

注意：直接占用内存和占用总内存字段中的数据是用字节表示的。

对象的占用总内存树

之前我们已经了解到，堆是由各种互相关联的对象组成的网状结构。在数字领域，这种结构被称为图或内存图。图是由 边缘(edges)连接着的 节点(nodes)组成的，他们都被贴了标签。

节点(Nodes) ( 或对象) 节点的标签名是由创建他们的 构造(constructor)函数的名称确定
边缘(Edges) 标签名就是属性名

本文档的后面你将了解到如何使用堆分析仪生成快照。从下图的堆分析仪生成的快照中，我们能看到距离(distance)这个字段：是指对象到GC根的距离。如果同一个类型的所有对象的距离都一样，而有一小部分的距离却比较大，那么就可能出了些你需要进行调查的问题了。

支配对象(Dominators)

支配对象就像一个树结构，因为每个对象都有一个支配者。一个对象的支配者可能不会直接引用它支配的对象，就是说，支配对象树结构不是图中的生成树。

在上图中：

节点1支配节点2
节点2支配节点3，4和6
节点3支配节点5
节点5支配节点8
节点6支配节点7

在下图的例子中，节点 #3是 #10的支配者，但 #7也在每个从GC到 #10的路经中都出现了。像这样，如果B对象在每个从根节点到A对象的路经中都出现，那么B对象就是A对象的支配对象。

V8介绍

在本节，我们将描述一些内存相关的概念，这些概念是和 V8 JavaScript虚拟机(V8 VM 或VM)有关的。当分析内存时，了解这些概念对理解堆快照是有帮助的。

JavaScript对象描述

有三个原始类型：

数字(Numbers) (如 3.14159..)
布尔值(Booleans) (true或false)
字符型(Strings) (如 ‘Werner Heisenberg’)

它们不会引用别的值，它们只会是叶子节点或终止节点。

数字(Numbers)以下面两种方式之一被存储：

31位整数直接值，称做： 小整数(small integers)( SMIs)，或
堆对象，引用为堆值。堆值是用来存储不适合用SMI形式存储的数据，像 双精度数(doubles)，或者当一个值需要被 打包(boxed)时，如给这个值再设置属性值。

字符型数据会以下面两种方式存储：

VM堆，或
外部的 渲染器内存中。这时会创建一个包装对象用来访问存储的位置，比如，Web页面包存的脚本资源和其它内容，而不是直接复制至VM堆中。

新创建的JavaScript对象会被在JavaScript堆上(或 VM堆)分配内存。这些对象由V8的垃圾回收器管理，只要还有一个强引用他们就会在内存中保留。

本地对象是所有不在JavaScript堆中的对象，与堆对象不同的是，在它们的生命周期中，不会被V8垃圾加收器处理，只能通过JavaScript包装对象引用。

连接字符串是由一对字符串合并成的对象，是合并后的结果。 连接字符串只在有需要时合并。像一连接字符串的子字符串需要被构建时。

比如：如果你连接 a和 b，你得到字符串(a, b)这用来表示连接的结果。如果你之后要再把这个结果与 d连接，你就得到了另一个连接字符串((a, b), d)。

数组(Arrays) - 数组是数字类型键的对象。它们在V8引擎中存储大数据量的数据时被广泛的使用。像字典这种有键-值对的对象就是用数组实现的。

一个典型的JavaScript对象可以通过两种数组类型之一的方式来存储：

命名属性，和
数字化的元素

如果只有少量的属性，它们会被直接存储在JavaScript对象本身中。

Map - 一种用来描述对象类型和它的结构的对象。比如，maps会被用来描述对象的结构以实现对对象属性的快速访问

对象组

每个本地对象组都是由一组之间相互关联的对象组成的。比如一个DOM子树，每个节点都能访问到它的父元素，下一个子元素和下一个兄弟元素，它们构成了一个关联图。需要注意的是本地元素没有在JavaScript堆中表现－这就是它们的大小是零的原因，而它的包装对象被创建了。

每个包装对象都会有一个到本地对象的引用，用来传递对这些本地对象的操作。这些本地对象也有到包装对象的引用。但这并不会创造无法收回的循环，GC是足够智能的，能够分辨出那些已经没有引用包装对象的本地对象并释放它们的。但如果有一个包装对象没有被释放那它将会保留所有对象组和相关的包装对象。

先决条件和有用提示

Chrome 任务管理器

注意： 当使用Chrome做内存分析时，最好设置一个洁净的测试环境

打开Chrome的内存管理器，观察内存字段，在一个页面上做相关的操作，你可以很快定位这个操作是否会导致页面占用很多内存。你可以从Chrome菜单 > 工具或按Shift + Esc，找到内存管理器。

打开后，在标头右击选用 JavasScript使用的内存这项。

通过DevTools Timeline来定位内存问题

解决问题的第一步就是要能够证明问题存在。这就需要创建一个可重现的测试来做为问题的基准度量。没有可再现的程序，就不能可靠的度量问题。换句话说如果没有基准来做为对比，就无法知道是哪些改变使问题出现的。

时间轴面版(Timeline panel)对于发现程序什么时候出了问题很用帮助。它展示了你的web应用或网站加载和交互的时刻。所有的事件：从加载资源到解JavaScript，样式计算，垃圾回收停顿和页面重绘。都在时间轴上表示出来了。

当分析内存问题时，时间轴面版上的 内存视图(Memory view)能用来观察：

使用的总内存 – 内存使用增长了么?
DOM节点数
文档(documents)数
注册的事件监听器(event listeners)数

更多的关于在内存分析时，定位内存泄漏的方法，请阅Zack Grossbart的 Memory profiling with the Chrome DevTools

证明一个问题的存在

首先要做的事情是找出你认为可能导致内存泄漏的一些动作。可以是发生在页面上的任何事件，鼠标移入，点击，或其它可能会导致页面性能下降的交互。

在时间轴面版上开始记录(Ctrl+E 或 Cmd+E)然后做你想要测试的动作。想要强制进行垃圾回收点面版上的垃圾筒图标( )。

下面是一个内存泄漏的例子，有些点没有被垃圾回收：

如果经过一些反复测试后，你看到的是锯齿状的图形(在内存面版的上方)，说明你的程序中有很多短时存在的对象。而如果一系列的动作没有让内存保持在一定的范围，并且DOM节点数没有返回到开始时的数目，你就可以怀疑有内存泄漏了。

一旦确定了存在内存上的问题，你就可以使用 分析面板(Profiles panel)上的 堆分析仪(heap profiler)来定位问题的来源。

例子: 尝试一下 memory growth的例子，能帮助你有效的练习通过时间轴分析内存问题。

内存回收

内存回收器(像V8中的)需要能够定位哪些对象是 活的(live)，而那些被认为是死的(垃圾 )的对象是 无法引用到的(unreachable)。

如果 垃圾回收 (GC)因为JavaScript执行时有逻辑错误而没有能够回收到垃圾对象，这些垃圾对象就无法再被重新回收了。像这样的情况最终会让你的应用越来越慢。

比如你在写代码时，有的变量和事件监听器已经用不到了，但是却仍然被有些代码引用。只要引用还存在，那被引用的对象就无法被GC正确的回收。

当你的应用程序在运行中，有些DOM对象可能已经更新/移除了，要记住检查引用了DOM对象的变量并将其设null。检查可能会引用到其它对象(或其它DOM元素)的对象属性。双眼要盯着可能会越来越增长的变量缓存。

堆分析仪

拍一个快照

在Profiles面板中，选择 Take Heap Snapshot，然后点击 Start或者按Cmd + E或者Ctrl + E：

快照最初是保存在渲染器进程内存中的。它们被按需导入到了DevTools中，当你点击快照按钮后就可以看到它们了。当快照被载入DevTools中显示后，快照标题下面的数字显示了能够被引用到的(reachable)JavaScript对象占有内存总数。

例子：尝试一下 garbage collection in action的例子，在时间轴(Timeline)面板中监控内存的使用。

清除快照

点击Clear all按钮图标( )，就能清除掉所有快照：

注意：关闭DevTools窗口并不能从渲染内存中删除掉收集的快照。当重新打开DevTools后，之前的快照列表还在。

记住我们之前提到的，当你生成快照时你可以强制执行在DevTools中GC。当我们拍快照时，GC是自动执行的。在时间轴(Timeline)中点击垃圾桶(垃圾回收)按钮( )就可以轻松的执行垃圾回收了。

例子：尝试一下 scattered objects并用堆分析仪(Heap Profiler)分析它。你可以看到(对象)项目的集合。

切换快照视图

一个快照可以根据不同的任务切换视图。可以通过如图的选择框切换：

下面是三个默认视图：

Summary(概要) - 通过构造函数名分类显示对象；
Comparison(对照) - 显示两个快照间对象的差异；
Containment(控制) - 可用来探测堆内容；

Dominators(支配者)视图可以在Settings面板中开启 – 显示 dominators tree. 可以用来找到内存增长点。

通过不同颜色区分对象

对象的属性和属性值有不同的类型并自动的通过颜么进行了区分。每个属性都是以下四种之一：

a:property - 通过名称索引的普通属性，由.(点)操作符，或[](中括号)引用，如["foo bar"]；
0:element - 通过数字索引的普通属性，由[](中括号)引用；
a:context var - 函数内的属性，在函数上下文内，通过名称引用；
a:system prop - 由JavaScript VM 添加的属性，JavaScript代码不能访问。

命名为 System的对象没有对应的JavaScript类型。它们是JavaScript VM对象系统内置的。V8将大多数内置对象和用户JS对象放在同一个堆中。但它们只是V8的内部对象。

视图详解

Summary view(概要视图)

打开一个快照，默认是以概要视图显示的，显示了对象总数，可以展开显示具体内容： Initially, a snapshot opens in the Summary view, displaying object totals, which can be expanded to show instances:

第一层级是”总体”行，它们显示了：

Constructor(构造函数)表示所有通过该构造函数生成的对象
对象的实例数在Objects Count列上显示
Shallow size列显示了由对应构造函数生成的对象的 shallow sizes(直接占用内存)总数
Retained size列展示了对应对象所占用的最大内存
Distance列显示的是对象到达GC根的最短距离

展开一个总体行后，会显示所有的对象实例。没一个实例的直接占用内存和占用总内存都被相应显示。@符号后的数字不对象的唯一ID，有了它你就可以逐个对象的在不同快照间作对比。

例子：尝试这个例子(在新tab标签中打开)来了解如何使用概要视图。

记住黄色的对象被JavaScript引用，而红色的对象是由黄色背景色引用被分离了的节点。

Comparison view(对照视图)

该视图用来对照不同的快照来找到快照之间的差异，来发现有内存泄漏的对象。来证明对应用的某个操作没有造成泄漏(比如：一般一对操作和撤消的动作，像找开一个document，然后关闭，这样是不会造成泄漏的)，你可以按以下的步骤尝试：

在操作前拍一个堆快照；
执行一个操作(做你认为会造成泄漏的动作)；
撤消之前的操作(上一个操作相反的操作，多重复几次)；
拍第二个快照，将视图切换成对照视图，并同快照1进行对比。

在对照视图下，两个快照之间的不同就会展现出来了。当展开一个总类目后，增加和删除了的对象就显示出来了：

例子：尝试例子(在新tab标签中打开)来了解如何使用对照视图来定位内存泄漏。

Containment view(控制视图)

控制视图可以称作对你的应用的对象结构的”鸟瞰视图(bird’s eys view)”。它能让你查看function内部，跟你的JavaScript对象一样的观察VM内部对象，能让你在你的应用的非常低层的内存使用情况。

该视图提供了几个进入点：

DOMWindow 对象 - 这些对象是JavaScript代码的”全局”对象；
GC根 - VM的垃圾回收器真正的GC根；
Native对象 - 浏览器对象对”推入”JavaScript虚拟机中来进行自动操作，如：DOM节点，CSS规则(下一节会有详细介绍。)

下图是一个典型的控制视图：

例子：尝试例子(在新tab标签中打开)来了解如何使用控制视图来查看闭包内部和事件处理。

关于闭包的建议

给函数命名对你在快照中的闭包函数间作出区分会很用帮助。如：下面的例子中没有给函数命名：

function createLargeClosure() {
  var largeStr = new Array(1000000).join(’x’);

  var lC = function() { // this is NOT a named function
    return largeStr;
  };

  return lC;
}

而下面这个有给函数命名：

function createLargeClosure() {
  var largeStr = new Array(1000000).join(’x’);

  var lC = function lC() { // this IS a named function
    return largeStr;
  };

  return lC;
}

例子：尝试这个例子 why eval is evil来分析内存中闭包的影响。你可能也对尝试下面这个例子，记录 heap allocations(堆分配)有兴趣。

揭露DOM内存泄漏

这个工具独一无二的一点是展示了浏览器原生对象(DOM节点，CSS规则)和JavaScript对象之间的双向引用。这能帮助你发现因为忘记解除引用游离的DOM子节点而导致的难以发觉的内存泄漏。

DOM内存泄漏可能会超出你的想象。看下下面的例子 – #tree对象什么时候被GC呢？

var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //#tree can’t be GC yet due to treeRef
  treeRef = null;

  //#tree can’t be GC yet due to indirect
  //reference from leafRef

  leafRef = null;
  //#NOW can be #tree GC

#leaf代表了对它的父节点的引用(parentNode)它递归引用到了 #tree，所以，只有当leafRef被nullified后 #tree代表的整个树结构才会被GC回收。

例子：尝试 leaking DOM nodes来了解哪里DOM节点会内存泄漏并如何定位。你也可以看一下这个例子： DOM leaks being bigger than expected。

查看Gonzalo Ruiz de Villa的文章 Finding and debugging memory leaks with the Chrome DevTools来阅读更多关于DOM内存泄漏和内存分析的基础。

原生对象在Summary和Containment视呼中更容易找到 – 有它们专门的类目：

例子：尝试下这个例子(在新tab标签中打开)来了解如何将DOM树分离。

支配者视图(Dominators view)

支配者视图显示了堆图的支配者树。支配者视图跟控制(Containment)视图很像，但是没有属性名。这是因为支配者可能会是一个没有直接引用的对象，就是说这个支配者树不是堆图的生成树。但这是个有用的视图能帮助我们很快的定位内存增长点。

注意：在Chrome Canary中，支配者视图能够在DevTools中的Settings > Show advanced heap snapshot properties 开启，重启DevTools生效。

例子：尝试这个例子(在新tab标签中打开)来练习如何找到内存增长点。可以进一步尝试下一个例子 retaining paths and dominators。

对象分配跟踪器

对象跟踪器整合了 heap profiler的快照增量更新分析和Timeline面板的记录。跟其它工具一样，记录对象的堆配置需要启动记录，执行一系列操作，然后停止记录然后进行分析。

对象跟踪器不间断的记录堆快照(频率达到了每50毫秒！)，结束时记录最后一个快照。该堆分配分析器显示对象在哪被创建并定位它的保留路径。

开启并使用对象分析器

开始使用对象分析器： 1. 确认你使用的是最新版的 Chrome Canary。

打开DeveTools并点击齿轮图标(译者：没明白这步有什么用)。
现在，打开Profiler面板，你就能看到”Record Heap Allocations”的选项。

上面的柱条表示在堆中生成的新对象。高度就对应了相应对象的大小，它的颜色表示了这个对象是否在最后拍的那个快照中还在：蓝色柱表示在timeline最后这个对象还在，灰色柱表示这个对象在timeline中生成，但结束前已经被内存回收了。

上面的例子中，一个动作执行了10次。同一个程序保留了5个对象，所以最后5个蓝色柱条被保留了。但这最后留下的柱存在潜在的问题。你可以用timeline上的滑动条缩小到那个特定的快照并找到这个分配的对象。

点击一个堆中的对象就能在堆快照的下面部分显示它的保留总内存树。检查这个对象的保留总内存树能够给你足够的信息来了解为什么这个对象没有被回收，然后你就能对代码做相应的修改来去掉不必要的引用。

内存分析FAQ

问：我不能看到对象的所有属性，我也看到它们的非字符串值！为什么？

并非所有属性都完整的保存在JavaScript堆中。其中有些是通过执行原生代码的getters方法来获取的。这些属性没有在堆快照中捕获，是为了防止对getters方法的调用和避免程序状态的改变，如果这些getters方法不是”纯(pure)”的functions。同样，非字符串的值，如数字，没有被捕获是为了减少快照的大小。

问：@ 符号后面的数字是什么意思 – 是地址还是ID呢？这个ID值真的是唯一的么？

这是对象ID。显示对象的地址没有意义，因为一个对象会在垃圾回收的时候被移除。这些对象IDs是真正的IDs – 就是说，它们在不同的快照间是唯一表示的。这样就可以的堆状态间进行精确的对比。维持这些IDs会给GC流程增加额外的开支，但这仅在记录第一次堆快照时分配 – 如果堆分析仪没有用到，就不会有额外的开支。

问：”死”(无法引用到的)对象被包含在快照中了么？

没有，只有可以引用到的对象才会显示在快照中。而且，拍快照前都会先自动执行GC操作。

注意：在写这篇文章的时候，我们计划在拍快照的时候不再GC，防止堆尺寸的减少。现在已经是这样了，但垃圾对象依然显示在快照之外。

问：GC根是由什么组成的？

由很多部分组成：

原生对象图；
符号表；
VM线程中的栈；
编辑缓存；
控制器上下文；
全局控制器。

问：我得知可以使用Heap Profiler和Timeline Memory view来检测内存泄漏。但我应该先用哪个工具呢？

Timeline面版，是在你第一次使用你的页面发现速度变慢了时用来论断过多的内存使用。网站变慢是比较典型的内存泄漏的信号，但也可能是其它的原因 – 可能是有渲染或网络传输方面的瓶颈，所以要确保解决你网页的真正问题。

论断是否是内存问题，就打开Timeline面板和Memory标签。点击record按钮，然后在你的应用上重复几次你认为可能导致内存泄漏的操作。停止记录。你应用的内存使用图就生成出来了。如果内存的使用一直在增长(而没有相应的下降)，这就表明你的应用可能有内存泄漏了。

一般一个正常的应用的内存使用图形是锯齿状的，因为内存使用后又会被垃圾回收器回收。不用担心这种锯齿形 – 因为总是会因为JavaScript而有内存的消耗，甚至一个空的 requestAnimationFrame也会造成这种锯齿形，这是无法避免的。只要不是那种分配了持续很多内存的形状，那就表明生成了很多内存垃圾。

上图的增长线是需要你警惕的。在诊断分析的时候Memory标签中的DOM node counter，Document counter和Event listener count也是很有用的。DOM节点数是使用的原生内存不会影响JavaScript内存图。

一旦你确认你的应用有内存泄漏，堆分析仪就可以用来找到内存泄漏的地方。

问：我发现堆快照中有的DOM节点的数字是用红色标记为”Detached DOM tree”，而其它的是黄色的，这是什么意思呢？

你会发现有不同的颜色。红色的节点(有着深色的背景)没有从JavaScript到它们的直接的引用，但它们是分离出来的DOM结构的一部分，所以他们还是在内存中保留了。有可能有一个节点被JavaScript引用到了(可能是在闭包中或者一个变量)，这个引用会阻止整个DOM树被内存回收。

黄色节点(黄色背景)有JavaScript的直接引用。在同一个分离的DOM树中查看一个黄色的节点来定位你的JavaScript的引用。就可能看到从DOM window到那个节点的属性引用链(如： window.foo.bar[2].baz)。

下面的动态图显示了分离节点的处理过程：

例子：尝试这个例子 detached nodes你可以查看节点在Timeline中的生命周期，然后拍堆快照来找到分离的节点。

问：直接占用内存(Shallow Size)和占用总内存(Retained Size)分别代表什么，它们的区别是什么？

是这样的，对象可以在内存中以两种方式存在(be alive) – 直接的被别一个可访问的(alive)对象保留(window和document对象总是可访问的)或被原生对象(象DOM对象)隐含的包留引用。后一种方式会因为阻止对象被GC自动回收，而有导制内存泄泥漏的可能。对象自身占用的内存被称为直接占用内存(通常来说，数组和字符串会保留更多的直接占用内存(shallow size))。

一个任意大小的对象可以通过阻止其它对象内存被回收在保留很大的内存使用。当一个对象被删除后(它造成的一些依赖就无法被引用了)能够释放的内存的大小被称有占用总内存(retained size)。

问：constructor和retained字段下有很多的数据。我应该从哪开始调查我是的否遇到了内存泄漏呢？

一般来说最好是从通过retainers排序的第一个对象开始，retainers之间是通过距离排序的(是指到window对象的距离)。

距离最短的对象有可能是首选的可能导致内存泄漏的对象。

问：Summary, Comparison, Dominators 和 Containment这些视图之间的不同是什么？

你可以通过切换视图来体验它们的区别。

Summary(概要)视图能帮你通过构造函数分组寻找对象(和对象的内存使用)。该视图对找出DOM内存泄漏很有帮助。
Comparison(对照)视图能够通过显示哪些对象内存被正确的回收了来搜寻内存泄漏。通常在一个操作前后记录两个(或更多)的内存使用快照。它是通过察看释放的内存和引用数目的差导来察看是否有内存泄漏，并找到原因。
Containment(控制)视图对对象结构有更好的展示，帮助我们分析全局作用域(如 window)中对象引用情况来找到是什么保留了这些对象。它能让你分析闭包并深入到对象更深层去查看。
Dominators(支配者)视图能用来帮助我们确认没有多余的对象还挂在某个位置(如那些被引用了的)，和确认对象的删除/垃圾回收真正起了作用。

问：堆分析仪中的constructor(一组)内容代表什么？

(global property) - 全局对象(像 ‘window’)和引用它的对象之间的中间对象。如果一个对象由构造函数Person生成并被全局对象引用，那么引用路径就是这样的：[global] > (global property) > Person。这跟一般的直接引用彼此的对象不一样。我们用中间对象是有性能方面的原因，全局对象改变会很频繁，非全局变量的属性访问优化对全局变量来说并不适用。
(roots) - constructor中roots的内容引用它所选中的对象。它们也可以是由引擎自主创建的一些引用。这个引擎有用于引用对象的缓存，但是这些引用不会阻止引用对象被回收，所以它们不是真正的强引用(FIXME)。
(closure) - 一些函数闭包中的一组对象的引用
(array, string, number, regexp) - 一组属性引用了Array,String,Number或正则表达式的对象类型
(compiled code) - 简单来说，所有东西都与compoled code有关。Script像一个函数，但其实对应了<script>的内容。SharedFunctionInfos (SFI)是函数和compiled code之间的对象。函数通常有内容，而SFIS没有(FIXME)。
HTMLDivElement, HTMLAnchorElement, DocumentFragment 等 – 你代码中对elements或document对象的引用。

在你的程序的生命周期中生成的很多其它的对象，包括事件监听器或自定义对象，可以在下面的controllers中找到：

问：我在做内存分析时需要关闭Chrome里可能会产生影响的什么功能么？

我们建议在用Chrome DevTools做内存分析时，你可以使用关闭所有扩展功能的隐身模式，或设置用户文件夹为( --user-data-dir="")后再打开Chrome。

应用，扩展甚至console中的记录都会对你的分析有潜在的影响，如果你想让你的分析可靠的话，禁用这些吧。

写在最后的话

今天的JavaScript引擎已经具有很强的能力，能够自动回收代码产生的内存垃圾。就是说，它们只能做到这样了，但我们的应用仍然被证明会因为逻辑错误而产生内存泄漏。使用相应的工具来找到应用的瓶颈，记住，不要靠猜 – 测试它。

帮助实例

诊断内存泄漏

尽管很多内容在本文章中已经提到了，但一系列测试内存相关的问题的例子还是很有用的，下面是一组DOM节点内存泄漏的例子。你可能希望在测试你的更复杂的页面或应用前先用这些例子做试验。

HTTPS網站被Chrome打臉？

Thu, 23 Apr 2015 21:22:03 CST

接獲報案，某網站的SSL圖示忽然被Chrome打上紅叉叉，https字眼也被劃掉，有種駭客正站在你背後的驚悚感。檢視該網站SSL憑證尚未到期，改用Firefox、IE檢視並無異樣，只有Chrome在連線資訊提及沒有公開稽核記錄、安全性設定已過時、使用過舊密碼編譯法等缺失。

以上提到的缺失並不算新鮮事。

公開稽核記錄是指網站經第三方單位稽核無誤，跟花錢取得 ~~CAS~~ ISO認證差不多意思，目的在提升客戶信心。而具備公開稽核記錄的憑證，Chrome或IE還會在地址列標示組織名稱 ~~以顯尊榮~~，例如：

不過，電子商務應用或強調資安的網站較有動機申請第三方稽核提升公信力（畢竟要成本），像是Google、Facebook、YouTube的SSL憑證也都沒有公開稽核記錄。嚴格來說，沒有公開稽核記錄不算缺失。

至於「安全性設定過時」、「過舊的密碼編譯法」就比較嚴重…

故事是這樣的（以下會扯到一些密碼學術語，我盡量說人話），現在大家廣泛使用的網頁加密技術（SSL），網站需要具備一張由憑證廠商或組織（CA）簽發的數位憑證（Certificate），數位憑證包含所謂的數位簽章（Signature)。數位簽章會用到一種稱為雜湊（Hash）的演算規則，過去數位憑證採用的雜湊演算法以SHA1為主。依照密碼學，數位簽章有可能被暴力破解、偽造（用電腦不斷嘗試各種組合試出答案），但只要雜湊或加密演算法的強度足夠，即便用全世界最快的電腦也得花上數千上萬年才能破解，就能有效阻擋駭客攻擊，稱得上安全。問題來了，依據摩爾定律，電腦每兩年的性能就會提高一倍，於2012年有研究指出，依電腦的演進速度，可以預期在幾年之後，SHA1的強度便不足以抵抗新一代電腦的攻擊。意思是只要大爺有錢，在雲端弄一堆機器組成電腦大軍，在短時間內破解數位簽章跟加密並非不可能的事，而花費成本每三年就會降到原來的1/3。很明顯地，SHA1被破解的風險在未來幾年內會逐年升愈高，安全性堪慮。（話雖如此，真要破解仍得花上幾百萬）。

於是，微軟宣布從2016年起停用採SHA1演算法的數位憑證，接著Google也跟進，但Google的政策就讓大家有感多了。Chrome瀏覽器開始針對採用SHA1的SSL憑證發出警告，並逐步加重力道！

Chrome 39版（2014/9）遇到網站使用SHA1憑證時，會在HTTPS鎖頭圖示加註黃三角，Chrome 40版（2014/11）將鎖頭圖示改成白紙，到了Chrome 41版（2015 Q1），鎖頭圖示再次出現，並加上令人驚心的紅叉叉，就是本案例所看到的樣子。[ 參考]

這就是原本好好的網站，忽然在Chrome出現紅叉叉鎖頭的原因！隨著客戶端陸續更新Chrome版本，海水一退，就知道哪些網站穿著短褲…

要解決這個問題很簡單，將SSL憑證換成SHA256版本就好了！而這是網站管理者要煩惱的問題，一般的使用者看到這裡就夠了。

如果你是網站管理者，SSL憑證到期更新及申請新憑證時，記得要確認取得皂是SHA256版的（但應該也不會有CA再簽發SHA1版了吧？）。若現行的SHA1憑證仍有效，依到期日不同，會有不同的結果，不一定會出現紅叉叉。由於SHA1疑慮屬預防性的警示，較大的風險發生在未來，而且愈晚愈嚴重。故Chrome 41使用以下邏輯判斷憑證的安全程度：

2016/1/1以前到期的憑證，反正很快要換新成SHA256版，被視為安全。

2016/1/1-2016/12/31到期憑證，有點危險（因為2016電腦又變快了，攻擊難度下降），標為鎖頭加黃三角。

2017/1/1以後到期的憑證，遇上的電腦就更凶狠了，故標示為鎖頭加紅叉叉。

以上是網友佛心製作的SSL憑證檢查工具（ http://sha1affected.com/），輸入網址就幫你分析憑證狀況並預估在各版Chrome下的顯示狀態，對網站SSL憑證有疑慮的朋友可多加利用。

因此，若網站現有憑證到期日在2016/1/1以後，Chrome 40/41使用者用HTTPS連上網站時，將出現鎖頭加黃三角或鎖頭加紅叉叉的狀況。網站管理者可請CA廠商或組織重新簽發SHA256版本，一般不會收費，但得花功夫處理，基於避免使用者誤解的立場，更換掉還是比較好。

不得不說，Google這一招對於撲殺SHA1憑證很有效果。雖然此舉為部分網站管理者多添一椿麻煩事，從提升全球資安的角度來看，還是要為Google按個讚！

【延伸閱讀】

Security Labs- SHA1 Deprecation- What You Need ... - Qualys Community 淺顯完整的SHA1議題說明
SHA1 Deprecation Policy - Windows PKI blog - TechNet Blogs 微軟的SHA1停用政策
Google Online Security Blog- Gradually sunsetting SHA-1 Google的Chrome SHA1停用政策

使用Chrome DevTools的Timeline分析页面性能

Fri, 13 Nov 2015 15:50:38 CST

随着webpage可以承载的表现形式更加多样化，通过webpage来实现更多交互功能，构建web应用程序已经成为很多产品的首要选择。这种方式拥有非常明显的优势：跨平台、开发便捷、便于部署和维护等等，但随着功能的不断积累，web应用程序也会变得越来越复杂。但是，我们仍然想要在webpage支持丰富的呈现形式的同时，让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿，就需要我们使用一些比较直观的方式来分析衡量页面的性能问题，为性能优化方案提供依据。

为什么是60fps?
我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒。

需求大体明确，就是要找到页面执行过程中的性能瓶颈。而Chrome DevTools的Timeline则正是用来记录和分析应用在运行时所有的活动情况，它是用来排查应用性能瓶颈的最佳工具。

下图是Timeline面板的预览效果：

Tips:为了避免浏览器插件对分析过程产生影响，建议在隐身模式下进行分析。

Timeline工具栏介绍

Timeline工具会详细检测出在Web应用加载的过程中时间花费情况的概览，包括下载资源、处理DOM事件、页面布局渲染、向屏幕绘制元素等。你可以通过分析Timeline得到的事件、框架和实时的内存用量，找出应用的性能问题。

在分析页面前，需要首先开启录制功能，记录页面的操作和渲染记录。如上图，左上角的灰色圆点就是录制按钮，点击后会变成红色，然后在页面上进行相关操作后再次按下变成灰色完成录制，这样就完成了一次对操作及加载渲染的记录过程，随后Timeline就会开始分析操作过程中的各项性能参数。

Timeline同时提供了两种查看模式：“事件模式(Event Mode)”和“帧模式(Frame Mode)”。如上图箭头所示。

事件模式：显示重新渲染的各种事件花费的时间。
帧模式：显示每一帧的时间花费情况。

事件模式 (Event Mode)

如果我们的一个页面执行效率不高，我们必须要搞清楚导致页面性能低下的原因，到底是javascript执行出了问题，还是页面渲染出了问题。要了解这里面的执行细节，我们可以使用“事件模式”来进行分析。首先我们需要录制一些需要被分析的操作，录制结束后进入事件模式预览Timeline。下图是得到的事件模式的视图：

在上图中，不同的颜色表示不同的事件。一种颜色的区块越长，说明在处理该事件的耗时就越长。单击某一区块，可以在下面的Summary概要中看到详细的事件处理过程及耗时分布。

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间

在显示的记录中，浏览器也会为在检测过程中发现的一些可能导致性能问题的过程进行标注，在 Mode View视图区域，可能会出现一些红色的区块段，这些红色的区块段表明，在对应的时间上执行的事件可能存在性能问题，而在对应的 Main Thread视图区域，事件区块的右上角会出现红色的小三角，点击当前区块，在下面的 Summary概要区域内会给出详细的警告内容以及脚本可能出现问题的行数，如下图，浏览器提示“强制同步布局可能会导致性能瓶颈”：

此外，在关闭Event Mode后，还可以看到Record Detail视图，详细列出一次记录中各类事件的详细内容。

Record Detail视图区域的左侧是事件标题，右侧是对应的时间线。点击每一条时间标题可以看到更多信息，如事件发生在脚本的哪一行等。如果你只对某一个时间段内的某些操作感兴趣，可以通过移动时间轴的始末位置来选择要浏览的区域：

帧模式 (Frame Mode)

帧模式从页面渲染性能的角度提供了数据支撑，一个柱状“frame”表示渲染过程中的一帧，也就是浏览器为了渲染单个内容块而必须要做的工作，包括：执行js，处理事件，修改DOM，更改样式和布局，绘制页面等。

如前文所述，我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这样就能保证页面有高流畅度的渲染。

中在Frame视图中有两条贯穿该视图的横线，分别标识出60FPS和30FPS的基准，按照前面提到的16.66ms的计算方式，我们可以理解为分别标识了16.6ms和33.3ms两个时间点。下面的一条是60FPS，低于这条线，可以达到每秒60帧；上面的一条是30FPS，低于这条线，可以达到每秒30次渲染。如果色柱都超过30FPS，这个网页就有性能问题了。

图中帧柱的高度表示了该帧的总耗时，帧柱中的颜色分别对应该帧中包含的不停类型的事件。每一帧柱的高度越低越好，上图是艺龙PC首页 www.elong.com的帧渲染图，从图中可以看出，在进行某些帧的渲染时，帧的渲染频率低于30FPS/s，第二帧和第三帧就大幅低于30fps(帧柱高度高于30fps标准线)，在实际浏览器渲染中就有可能出现卡顿。对相关的帧进行分析时，可以点击其中某一帧查看渲染详情，也可以选择某个区域的几个帧查看渲染详情。而要找出可能影响性能的原因，点击当前问题帧，在 Summary面板及 Record Detail视图中的详细信息中进行逐条分析。

你可能注意到了在帧柱上存在灰色区域和空白区域,它们分别代表：
灰色区块：那些没有被DevTools感知到的活动
空白区块：显示刷新周期（display refresh cycles）中的空闲时间段

点击某一个帧柱还可以得到该帧的详细记录数据：

Warning: 警告信息
ScreenShot: 当前选中帧的渲染截屏
Duration: 该记录及其子记录的总耗时
FPS: 当前帧的渲染频率
CPU Time: CPU耗时
Aggregated Time: 合计耗时分布

总结

发现问题是解决问题的第一步，chrome浏览器的TimeLine工具可以很好地辅助我们分析页面的性能瓶颈，提供详细全面的分析数据，为我们进行性能优化提供数据依据。当然，TimeLine中有用的功能还有很多，比如 Memery Mode, Screen Shot等，使用技巧多种多样，在这里主要介绍了如何去记录一段渲染过程，如何去使用 Event Mode和 Frame Mode去查看并分析得到性能指标，后续如果有新的体会和发现，还会再做记录~

TimeLine中的事件汇总

Loading事件

事件	描述
Parse HTML	浏览器执行HTML解析
Finish Loading	网络请求完毕事件
Receive Data	请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Receive Response	响应头报文到达时触发
Send Request	发送网络请求时触发

Scripting事件

事件	描述
Animation Frame Fired	一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame	取消一个动画帧时触发
GC Event	垃圾回收时触发
DOMContentLoaded	当页面中的DOM内容加载并解析完毕时触发
Evaluate Script	A script was evaluated.
Event	js事件
Function Call	只有当浏览器进入到js引擎中时触发
Install Timer	创建计时器（调用setTimeout()和setInterval()）时触发
Request Animation Frame	A requestAnimationFrame() call scheduled a new frame
Remove Timer	当清除一个计时器时触发
Time	调用console.time()触发
Time End	调用console.timeEnd()触发
Timer Fired	定时器激活回调后触发
XHR Ready State Change	当一个异步请求为就绪状态后触发
XHR Load	当一个异步请求完成加载后触发

Rendering事件

事件	描述
Invalidate layout	当DOM更改导致页面布局失效时触发
Layout	页面布局计算执行时触发
Recalculate style	Chrome重新计算元素样式时触发
Scroll	内嵌的视窗滚动时触发

Painting事件

事件	描述
Composite Layers	Chrome的渲染引擎完成图片层合并时触发
Image Decode	一个图片资源完成解码后触发
Image Resize	一个图片被修改尺寸后触发
Paint	合并后的层被绘制到对应显示区域后触发

参考文档

https://developers.google.com/chrome-developer-tools/docs/timeline

http://www.w3cfuns.com/article-1248-1.html

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

为了减少内存占用，Chrome将引入新机制

Fri, 31 Jul 2015 09:43:22 CST

以快速著称的 Chrome 浏览器，也是内存等资源占用大户。两者当真是鱼和熊掌不可兼得吗？Chromium 团队正对此做出改进。

得益于标签页独立进程的内存设计，Chrome 会为每个已经加载完毕的标签页建立一个独立的进程，一方面加载和相应速度变快，另一方面即便页面崩溃对其它页面也基本不会造成影响。这样一来，4GB 以下内存的机器就很难承受，Chrome 也因此饱受争议。

好在这一情况很快会得到改观了。根据 Chromium 团队成员 François Beaufort 在自己的 Google+页面中透露，即将引入一种「主动节省内存」策略。当系统可用内存不足时，这个新增的功能会自动舍弃用户最不关心的标签页。需要指出的是，这里的「舍弃」并不是关闭，而是始终保持开启状态，用户点击时会重新加载。如果你订阅了实验性的 Chromium 编译版本，那么可以在「chrome://flags/#enable-tab-discarding」中启用「Tab Discarding」。至于 Chrome 如何对「最感兴趣的标签页」进行排序，则可前往「chrome://discards」。

在 Chrome OS 和 Mobile 版 Chrome 浏览器中，这种机制早就被引入进来。François Beaufort 称 Windows 和 Mac OS 版 Chrome 浏览器将会率先用上这一功能，Linux 版则要稍后一段时间。

7个触控技巧让Chrome远端桌面从手机灵活控制电脑

Wed, 22 Oct 2014 22:37:27 CST

三年前Google开始推出「 Chrome远端桌面］功能，利用安装在浏览器内的App进行电脑与电脑之间的远端桌面控制，而在今年4月（ 2014年）， Chrome远端桌面登陆Android系统，让Android使用者获得一个实用的免费工具，可以从手机远端操控自己家中、公司的电脑桌面。 为什么要从手机操控家里的电脑 ？我马上可以想到很多实用的例子，例如很多软体手机上没有，或是手机上功能阳春，如果在外面行动时有紧急需求必须打开这类软体工作，那么与其去找手机App，还不如用「远端桌面」，从手机连回家中电脑，打开家中电脑软体完成工作，像是Photoshop修图，或是我平常写部落格用的Blogger网页编辑后台。手机虽然有相应App ，但还是电脑上功能更完整，这时候若是有紧急需求，一个临时行动工作的折衷之道，就是用手机的远端桌面连回电脑操作。但是，这样的操作真的方便吗？当然不会比你直接在家里用电脑便捷，可是现在手机上的远端桌面App其实操控已经愈来愈完美、速度愈来愈顺畅，要从手机灵活控制桌面电脑的大萤幕是可以实现的梦想。 今天这篇文章，我就要以免费Google Chrome远端桌面Android App的 七个触控技巧 来示范手机如何灵活控制电脑的复杂操作。

「 Chrome远端桌面」支援Windows、 Mac等电脑系统之间的远端桌面操控，也可以透过Chrome远端桌面的Android App来操作远端的电脑。要怎么在电脑、手机上安装并完成Chrome远端桌面的设定呢？ 这部分请先参考之前电脑玩物上的「 Chrome远端桌面安装设定教学 」。完成安装设定后，就让我们一起来看看，手机端有哪些触控技巧，让我们也能从小萤幕轻松的完成桌面的大萤幕操作。

1. 放大缩小桌面：两指缩放画面

要在手机小萤幕容纳整个电脑桌面大萤幕是不可能的，所以我自己的使用习惯是在手机上拿出放大镜，放大我想要操作的那一小部分电脑桌面即可。这时候只要利用「双指缩放」，就可以放大、缩小任何范围内的桌面，透过这个小技巧，在手机上也能清楚看到电脑软体的每一个按钮功能，并且很方便的点选、编辑、操作。

2. 随着滑鼠移动画面视野：单指滑动

可是手机上把电脑桌面放到很大，这样不是只看到部分的桌面视野吗？如果要操作电脑桌面其他部分时要怎么移动？其实很简单，只要用「单指在手机萤幕上滑动」，就会看到电脑上的滑鼠游标跟着你的方向滑动，而当滑鼠游标移动到视野范围边缘时，整个画面视野就会自动的往游标方向移动，如此一来就好像移动你的放大镜，可以轻松看到桌面其他部分。

3. 滑鼠左键：单指单击

操控电脑软体最重要的滑鼠左键、右键，也可以在Chrome远端桌面上用简单的方法实现。如果要使用滑鼠左键打开档案、开启功能，只要利用前面提到的单指滑动先把滑鼠游标移动到你要点选的按钮上，这时候在手机萤幕任何地方进行「单指单击」，这就是模拟滑鼠左键动作，可以开启该按钮功能。

4. 滑鼠右键：双指单击

滑鼠右键也很简单，同样的方法将滑鼠游标先移动到目标上，这时候在手机萤幕任何地方进行「双指单击」，就可以启动滑鼠右键功能。通常我们利用这个功能来打开档案或连结的附加选单。

5. 卷动网页：双指拖曳

我有时候会从手机上远端桌面连回家里电脑，打开Blogger完整网页版后台进行部落格文章的编辑，但是文章写得很长，要怎么快速进行网页的卷轴卷动、文件的上下卷动？其实很简单，在手机萤幕的任何地方进行「双指拖曳」，上下拖曳就代表上下卷动长网页。

6. 按住后拖曳档案

有时候临时需要把电脑里的某个档案上传到云端硬碟来同步到手机，或是紧急需要电脑端的档案管理，这时候可以在手机端顺畅的完成电脑需要的档案管理操作吗？档案管理时我们最习惯的是使用滑鼠拖曳档案这样的功能，而在Chrome远端桌面的手机端，同样只要先将滑鼠移动到档案上，然后在手机萤幕任何地方「按住不放，开始拖曳」，就能进行和电脑一样的档案拖曳操作。

7. 快速拉出键盘：三指向上滑动

前面提到我会利用远端桌面从手机连回电脑进行部落格文章编辑，当然这通常不是正式的编辑，而是我在移动中忽然想到需要一些紧急修改，但无法马上回到电脑前，就可以利用手机远端桌面解决问题。而这时候怎么在手机进行远端桌面上的文件编辑、打字呢？其实很简单，从手机远端桌面打开任何电脑上的编辑工具，用「三指往上滑动」的手势，可以快速拉出手机键盘，这时候这就是你的电脑键盘，可以同样的输入任何内容。 利用上面这几个基本的触控技巧，其实手机上也能「 合理、实用 」的操控电脑桌面，完成你的临时工作需求，满足你必须使用电脑上更强大的软体的要求，而且从放大视野、滑鼠移动、网页卷动都能顺畅操控，提供给需要的朋友参考。当然，如果你不需要这么复杂的手机－电脑操控，你可能只是想利用手机「遥控」电脑端的影音播放器，那么这时候你不需要远端桌面，只需要安装像是「 Unified Remote免设定让Android手机变身PC万用遥控器」这样的免费App即可。

7个触控技巧让Chrome远端桌面从手机灵活控制电脑，首发于极客范 - GeekFan.net。

xampp结合chrome和eclipse调试php的配置步骤

Sun, 07 Dec 2014 23:11:19 CST

1.安装xampp后，打开php.ini文件，取消最后面的[XDebug]的注释，特别注意一定要打开元调试功能：xdebug.remote_enable = 1，重启xampp的apache服务。

2.安装chrone浏览器的php调试插件：xdebug heler。

3.在eclipse-php-helios-SR2-win32 的首选项中设置 php excutables,指向xampp中的php安装路径，且选择xdebug作为调试器。

4.在debug处选择xdebug，且php excutables 选择上一步设置的执行环境即可。配置installed Debugger 里面的xdebug，一定要

将Accept remote session 设置loaclhost 或者any，否则 eclipse里面是不会停在断点处的。

5.在eclipse中设置断点，然后chrone 浏览器中发起调试。

注意事项

在chrome浏览器发起调试时，需要选择Debug模式
如果不需要每次断点在第一行停留时，可取消"停在第一行” 选项。

作者：walkingmanc 发表于2014-12-7 15:11:19 原文链接

阅读：0 评论：0 查看评论

Chrome 远程调试协议分析与实战

Thu, 26 Jun 2014 15:00:00 CST

作者：the1sky

背景

某一天，A 君想获取 Chrome 页面中的性能数据，诸如时间、白屏和首屏等，因为需要和竞品进行对比分析，无法注入代码，该怎么办？

此时，你也许能想到 开发者工具(DevTools)，也许知道 Timeline(包含浏览器完整的行为数据)，该怎么自动获取到 Timeline 数据呢？

开发者工具

开发者工具(DevTools)是一个独立的 Web 应用程序(HTML+CSS+Javascript)，被集成在浏览器中，通过远程调试协议(remote debugging protocol)和浏览器内核进行交互，直接使用 Ctrl+Shift+I 呼出。

可以在当前的浏览器页面直接打开 DevTools 调试，也可以在浏览器之外进行调试，本文的实战内容基于 PC 平台浏览器之外的远程调试。

远程调试协议

远程调试协议基于 WebSocket，利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。DevTools 中的源代码( Main.js:220)如下：

   var ws;
if ("ws" in WebInspector.queryParamsObject)
    ws = "ws://" + WebInspector.queryParamsObject.ws;
else if ("page" in WebInspector.queryParamsObject) {
    var page = WebInspector.queryParamsObject.page;
    var host = "host" in WebInspector.queryParamsObject ? WebInspector.queryParamsObject.host : window.location.host;
    ws = "ws://" + host + "/devtools/page/" + page;
}

该协议把操作划分为不同的域(domain)，比如 DOM、Debugger、Network、Console 和 Timeline 等，可以理解为 DevTools 中的不同功能模块。

每个域(domain)定义了它所支持的 command 和它所产生的 event。

每个 command 包含 request 和 response 两部分，request 部分指定所要进行的操作以及操作说要的参数，response 部分表明操作状态，成功或失败。

command 和 event 中可能涉及到非基本数据类型，在 domain 中被归为 Type，比如：'frameId': <FrameId>，其中 FrameId 为非基本数据类型

至此，不难理解：

   domain = command + event + type

远程调试协议应用场景

针对移动端的远程调试，因为移动平台一般都不会提供足够大的区域来显示 DevTools，必须要在手机浏览器之外进行远程调试,具体配置请参看这篇文章
获取 JS 的 Runtime数据，常用的如 window.performance和 window.chrome.loadTimes() 等
获取 Network及 Timeline数据，进行自动性能分析
与强大的 phantomjs合体，phantomjs 暂时只支持基于 remote debugging protocol 的调试，希望能支持 Network 及 Timeline 数据的获取，phantomjs 的最新技术请点击进入

远程调试协议结构

以 Page domain 为例

command 结构如下：

   Page.navigate
request: {
    "id": <number>,
    "method": "Page.navigate",
    "params": {
        "url": <string>
    }
}
response: {
    "id": <number>,
    "error": <object>
}

执行 Page.navigate 操作，需要参数 url，id 可以随意指定，不过要确认全局的唯一性，因为需要通过 id 关联 request 和 response。

event 结构如下：

   Page.loadEventFired
{
    "method": "Page.loadEventFired",
    "params": {
    "timestamp": <number>
    }
}

Page domain 派发 loadEventFired 事件结构数据(通过 WebSocket 的 onmessage 获取)，并包含参数 timestamp

type 结构如下：

   Frame: object
    id ( string )
        Frame unique identifier.
    loaderId ( Network.LoaderId )
        Identifier of the loader associated with this frame.
    mimeType ( string )
        Frame document's mimeType as determined by the browser.
    name ( optional string )
        Frame's name as specified in the tag.
    parentId ( optional string )
        Parent frame identifier.
    securityOrigin ( string )
        Frame document's security origin.
    url ( string )
        Frame document's URL.

Frame type 为包含 id，loaderId，mimeType，name，parentId，securityOrigin 和 url 字段的 Object 数据类型，其中 loaderId 为另外一个定义在 Network domain 中的 type

更多协议内容请猛戳这里

远程调试协议实战

此协议用于 server 端和 client 端的通讯，所以需要先建立 server 端，然后 client 端通过协议连接到 server 端

开启 server 服务

打开浏览器的远程调试支持，并指定端口号：

   ./chrome --remote-debugging-port=9222

./chrome 为已安装的 Chrome 可执行程序

获取 server 地址

在浏览器中直接输入：

   http://localhost:9222/json

获取所有的 tabs 信息，数据格式如下：

   [
    {},
    {},
    {}
]

每个 {} 的内容如下：

   {
    description: "",
    devtoolsFrontendUrl: "/devtools/devtools.html?ws=localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    faviconUrl: "http://www.baidu.com/favicon.ico",
    id: "A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    thumbnailUrl: "/thumb/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    title: "百度一下，你就知道",
    type: "page",
    url: "http://www.baidu.com/",
    webSocketDebuggerUrl: "ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"
}

websocket server 端地址：

   webSocketDebuggerUrl: "ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"

建立连接

在任意地址栏中输入 http://localhost:9222 + devtoolsFrontendUrl 值即可(等同于在当前页面直接打开 DevTools)：

   http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"

或直接使用 WebSocket 连接，使用 webSocketDebuggerUrl 值连接：

   var ws = new WebSocket('ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"');

注意：每次只能进行一次 WebSocket 连接，之后的连接都会失败

调用 Command

WebSocket 通道建立完成之后，通过如下方式进行调用：

打开指定页面，并进行事件监听(以 Page.loadEventFired 为例)：

   ws.onmessage = function(event) {
    console.log(event.data);
};
ws.send('{"id": 1, "method": "Page.navigate", "params": {"url": "http://www.baidu.com"}}')

获取到的 loadEventFired 事件数据如下：

   {"method": "Page.loadEventFired", "params": {"timestamp": 1402317772.874949}}

WebSocket

协议

它是 HTML5 一种新的协议，实现了浏览器与服务器全双工通信，只需要一个握手动作，浏览器和服务器之间就形成了一个快速通道，然后进行数据互传。

优点：

   1、交互时的 header 只有约 2Bytes
2、服务端可以主动推送数据给客户端

header 格式（握手时）：

request:

   Cache-Control:no-cache
Connection:Upgrade
Host:localhost:9222
Origin:http://family.baidu.com
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits, x-webkit-deflate-frame
Sec-WebSocket-Key:TKSQVug6zSIH4uzIyTYBcg==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1914.0 Safari/537.36

response:

   Connection:Upgrade
Sec-WebSocket-Accept:HyjfMUpyYgWgkYLn/vDDf6rZLuk=
Upgrade:WebSocket

header 格式（交互时）：

request:

   User-Agent: Fiddler
Content-Type: application/json; charset=utf-8
Host: fakewebsocket
Content-Length: 211

response:

   FiddlerTemplate: True
Date: Fri, 25 Jan 2013 16:49:29 GMT
Content-Length: 51

查看 WebSocket 连接

DevTools

直接使用 DevTools，在控制台建立 WebSocket 连接并交互，在 Network 面板中直接显示

fiddler

自定义 fiddler 的规则，根据 WebSocket 特征提取信息并伪造 WebSocket 结构数据

因为伪造时，host 为 fakewebsocket，无法识别，所以通过 AutoResponder 伪造 respose 数据

请移步： Debug / Inspect WebSocket traffic with Fiddler

IE、Chrome、Firefox浏览器收藏夹同步方法

Fri, 20 Jun 2014 22:40:37 CST

个人认为在浏览器的收藏夹同步方面做得最好的还是google chrome，不久前IE自从系统升级到windows 8.1以后必须使用microsoft账户才能同步。这里收集了IE、Chrome、Firefox浏览器收藏夹同步方法，如果你有更好的方法，请一起分享讨论哦。

一、Google Bookmarks (适合 Chrome、Firefox ，提供 Web 版，支持多操作系统平台)

将书签托管在 Google 的云端，是比较稳定可靠的方案(当然这句话放在国内得打个对折)。在线登录 Google Bookmarks 页面后，从左边的侧边栏找到 “Import bookmarks”，将之前导出的 .html 文件导入即可。

如果您使用的是Chrome 浏览器，那么恭喜您，Chrome 6 以上版本本身已经自带了完美强大的同步功能(请从右上角工具图标->选项->同步->自定义中开启书签同步)，可自动将您保存的书签同步保存至个人 Google 账号的 bookmarks 下。

如果您习惯了 Firefox，同样可以通过安装 GMarks这个插件来自动同步 Google Bookmarks。

对于其他浏览器用户，或许直接访问 Google Bookmarks 的网页版是最省时省力的吧。

二、Firefox Sync (适合Firefox 用户，支持多操作系统平台)

再为 Firefox 用户介绍一个强大的插件 — Firefox Sync。它不仅能同步书签，还能同步密码、设置、访问历史、当前打开书签等，非常强悍，颇有迎头赶上Xmarks 的架势。

Firefox 4 Beta 本身已经内置了此工具，用户可直接享受。老版本用户则需下载安装此插件。使用前需通过 Email 注册一个帐号。

并且它还有适合移动设备访问的APP，例如 iPhone 客户端、N900 Maemo 客户端、其他兼容手机客户端。

三、Sync2It(适合 Safari / IE 用户，支持 Mac / Windows 操作系统平台)

Sync2It是又一款跨平台支持的小工具。如果您的系统是 Mac，那么它会自动同步 Safari 的书签;如果系统是 Windows，则会自动同步 IE 书签。它还允许您订阅官网上他人共享的书签列表。

四、Delicious 和 Diigo(适合 Firefox 和 Chrome，支持多操作系统平台)

与 Google Bookmarks 类似的书签云端存储服务有不少，Delicious和 Diigo算是比较知名的两家。二者均有丰富的官方和第三方插件，用于强化浏览器的工具栏、书签栏、扩展等。

其中，Diigo 也提供了导入功能，可导入从 Xmarks 中导出的 .html 文件。

对于Delicious的忠实用户，推荐 Firefox和 Chrome的两个专用插件。

五、使用第三方同步工具(Dropbox、DBank 等)

当然，也不能忘记这个屡试不爽万年通用技巧——第三方同步工具。借助它们，将应用程序的配置文件自动同步于多台电脑，就可实现一处改动，多处自动调整的效果。当然也适用于浏览器的数据资料同步，比如收藏夹、书签等。

这里首推的自然是 Dropbox，性能卓越，支持共享。国内较为稳定且实用的同步工具有 DBank，同样支持共享，并可将外链批量打包成列表。对于多人团队或是针对不同使用环境有不同书签管理方案的高级用户而言，不失为一种选择。

via:activedirectory

This article addresses: http://www.iefans.net/ie-chrome-firefox-shoucangjia-tongbu/

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

笔记本电池续航骤减25% 想省电千万别装Chrome！

Wed, 16 Jul 2014 19:18:55 CST

如果你的笔记本电池经常偷偷“跑电”，我们建议你好好检查一下自己所安装的软件——尤其是浏览器，它们很可能就是电量提前耗尽的罪魁祸首。

《福布斯》杂志日前刊文指出，Windows版谷歌Chrome浏览器目前存在一个严重的、能极大加速损耗电池电量的问题——在多数情况下，该问题甚至可导致笔记本电脑减少25%的续航时间。

Windows系统的核心有一个固定的“系统时脉”，通常情况下，这个周期是15.6毫秒，系统核心会在每秒钟询问处理器大约64次，以查看当前是否有任务需要执行。在系统没有向处理器发出请求的时候，处理器处于省电工作状态，频率、电压都会大大降低，这是笔记本节能技术的基本原理。

然而，透过工具可以发现，当Chrome处在运行状态时，电脑处理器会以每毫秒一次的频率收到频繁请求。换而言之，处理器过去每一秒只会被唤醒64次，而安装Chrome浏览器后，处理器每秒则会被唤醒1000次！这样以来，处理器的省电功能将形同虚设——不管有没有任务需要执行，它都会处于全速工作状态。

微软曾经表示，当系统时脉达到每周期1000毫秒时，能耗会最多增加能耗25%，这将大大缩短笔记本的续航时间。同时，改变系统时脉还会带来诸多其它问题，因为操作系统核心要统筹管理所有应用，不过，问题出现在系统层面，大多数用户很难发现这些问题。

[程序员] 如果你用 chrome 浏览器，而碰巧又用 Google 搜索的话，那么请进

Sun, 08 Jun 2014 19:39:33 CST

微博上看到

@ Fenng
据说：在 Chrome 浏览器中打开「实验性功能」页面（chrome://flags/），启用「实验性 QUIC 协议」和「经由实验性 QUIC 协议发出的 HTTPS 请求」，重启浏览器后可以正常登陆 Google 相关服务。// 我就是手抖

经过实践，可以打开Google搜索了。

开发者不可不知的 Google Chrome 七大新特性

Tue, 14 Oct 2014 07:23:26 CST

Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器，它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具。

DevTools 在不断的进行版本更新，其中有很多重要的更新细节你可能会错过。在这里罗列了 Google Chrome 最值得关注的七大新特性。

开始——Chrome 的 DevTools Experiment

Chrome 有一些非常棒的实验性特性，这些特性在默认情况下都是隐藏和禁用的。在浏览器地址栏输入 chrome://flags/#enable-devtools-experiments可以激活 DevTool Experiment 选项，在激活后重启浏览器。

重启后，启动 DevTools，点击齿轮图标移的右上角 DevTools 面板，你可以在左边栏看到“Experiment（实验）” 选项，在这里你可以选择任何一个想要激活的特性。

1. 改进移动设备模拟器

在移动设备高度普及的今天，网站的一个必备功能就是进行移动设备的优化。使用 Chrome 浏览器，你可以通过手机模拟器功能调试网站在移动模式的应用，这个模拟器已经被完全修改并增加了许多新特性。

启动 DevTools 并点击移动设备图标然后点击 loop/search（循环/搜索），打开移动设备模拟器，截图如上所示。正如你所看到的，上面的模拟器已经配备了标尺，因此你可以清楚看到网站视窗的尺寸大小。

2. 鼠标的复选

你想拥有在一个源文件里同时选择编辑多个不同主题的功能？Chrome 现在支持鼠标的复选。使用 Ctrl + 点击或者 Cmd+ 点击可以一次性选择多个。

3. 限制网络连接

现在你可以通过 DevTools 测试在不同连接下网站的响应和性能。在 DevTools 中，点击 Esc 启动 Console Drawer 然后选择 Emulation。在网络选项上，选择限制网络连接的速度类型，然后你就可以看到网站在执行选定的速度的情况下的表现了。

4. 脱机模式

Google Chrome 现在增加了脱机模式，它允许你在没有网络连接的情况下打开网站。如果你在进行网络开发，想要用户在没有网络的情况下也能打开网站，那么这无疑是一个很有用的功能。通过在浏览器地址栏输入 chrome://flags/#enable-offline-mode，启用“激活离线缓存模式”可以开启离线模式。

不要忘记重启 Chrome 浏览器使设置生效。

5. 可将 HTML 拖放到编辑器

有时你需要复制你的 HTML 元素到编辑器。取代手动复制和粘贴到编辑器，现在你可以更加便捷地拖动 DOM（文本对象模型）并将其放置进编辑器内想要的位置。

目前，你只能拖动一个元素，而且它的子元素不会被一并拖动过来。这方面的缺陷可能会在以后的版本里得到改善。

6. CSS 审核

现在你可以对你的 CSS 进行审核，比如检查没有在 web 页面使用的无用的样式规则。在“Audits”（审核）选项，点击“Run”（运行）按钮，你将会看到一个目前在该页面没有使用到的类/选择器的列表，如下图所示：

7. 增加 SourceMap

使用 SourceMap，你可以看到未创建或未编译的 CSS 或 JavaScript (JS）版本。此功能对于那些在创作风格或者脚本语言上使用 Sass、 LESS 或者 CoffeeScript 作为预处理器的开发者来说是非常有用的。启用 SourceMap，你可以通过某行某列的具体数字找到生成的 JS 或 CSS 的代码位置。最新版本的 Chrome 允许你手动添加 SourceMap。

要做到这一点的话，首先你要确保处于源面板，接着打开一个文件，在那之后右键单击并选择 Add Source Map. 添加到 .map 文件。

原文出处： Agus 译文出处： evget

Chrome OS 的破坏性创新

Mon, 10 Feb 2014 13:02:41 CST

作者：百事可乐 / 产品观察家

科学工作者。感兴趣于IT技术的未来及其对社会的影响。

[核心提示]目前而言，Chrome OS 并非一个完美的系统，但是它却能够胜任你百分之九十的工作与娱乐，另外随着云端软件的越来越丰富，这种趋势会将 Chrome OS 送上巅峰。那么它是如何做到的？

Chrome OS 是什么

Chrome OS 是 Google 近几年开发的基于 Linux 内核的云端操作系统，该系统内的所有操作都基于以 Chrome 浏览器为核心的 WEB 应用。它有自己的 webstore，用户可以从中选择安装各种 WEB 应用。这些应用绝大部分是基于网络的，但也有一部分允许离线使用。总的来说，Chrome OS 是轻量级的、本地应用受限的、极端依赖网络的，从而在本质上异于传统桌面操作系统如 Windows、Linux 和 MAC OS X。

依托该操作系统，Goolge 联合硬件厂商开发了若干搭载该系统的硬件产品，包括一体机、小主机、用于连接外部显示设备的 Chromecast 和广受关注的笔记本产品（称之为 Chromebook)。其中三星的一款 Chromebook 在很长的时间里高居美国 Amazon 低价笔记本销售冠军位置。

假设你现在正在使用这台三星 Chromebook（正是我现在使用的那一款）。因为 Chrome OS 核心就是 Chrome 浏览器，所以所有基于浏览器的工作都可以在 Chromebook 上完成。这包括所有基于浏览器的在线视频，基于浏览器的在线音乐，基于浏览器的在线图片；和 Google Drive 所能完成的可以满足绝大多数人需要的文字、图表、绘图等任务（这些功能离线可用），当然还有很多专为 Chrome OS 开发的各种应用。总的来说，所有轻量级的在线应用使用 Chromebook 都可以完成；而它所受限的地方是专业、大型的本地软件。

桌面操作系统和办公软件的破坏性创新

缺少对专业、大型软件的本地支持使得 Chromebook 并不能满足所有需求。如果你需要使用 Photoshop 或者 Matlab，那还是找传统的桌面操作系统吧。但假如你并没有任何的专业需求，一台 Chromebook 可以以很低的价格很好的满足你。

这应该也是微软需要担心的地方。Chrome OS 跟 Windows 在功能上没有可比性，前者的所有功能在后者上都可以轻松完成（只要安装 Chrome 浏览器就好了）。然而 Chrome OS 有它的优势：它是免费的、在线即时更新的、没有病毒的、免维护的、运行速度非常快的。更重要的一点是，它可以完成大多数人在 Windows 上面 90% 以上的工作，而且有免费的 Google Drive 的工作套件可用（云端的 Office）。

自然，因为缺少了这 10%，Chrome OS 和 Chromebook 现在很难成为我们的唯一的电脑，但它可能是家庭第二台电脑、孩子所用的教育电脑、老人所用的娱乐电脑等很多情境下的完美选择。我买了这台三星 Chromebook 差不多一年了，在这一年里我使用这台电脑的时间远远超过了我的那台 Thinkpad，因为大多数时候我不过只是要看个视频，或者写点东西，这些在 Chromebook 上完成起来毫无困难。

而且还有另外一个趋势，就是很多软件的云端化，事实上是所有计算的云端化。这是一个很大的话题，很难说将来一定会怎么发展，但一个明显的事实是越来越多的软件开始有了云端版本。软件的云端化对于软件公司来讲似乎不是坏事，因为云端软件按照使用时间或次数付费的商业模式基本上可以杜绝盗版，所以看起来软件公司应该有动力去推动这个过程。假如这是真的，那么对于微软来说，大祸就该临头了。

原因在于，如果未来所有软件都会走云计算的路，那么庞大的 Windows 对云时代来说就是过度满足的－－我们根本就不需要这样一个臃肿的桌面操作系统，轻便好用还免费的 Chrome OS 是更好的选择。

Linux 努力了好多年，想要在桌面操作系统领域挑战 Windows。然而对于一个在这个领域占有绝对优势的对手来讲，正面的挑战往往是极为困难，甚至是根本不可能的。按照克里斯坦森的看法，对于这样的对手，真正有威胁的是低端的非正面的然而又是革命性的创新，所谓“破坏性创新”，这种创新直接毁掉了原来占优势的对手的产品存在的基础，用完全不同的思路开创一种全新的商业模式。

谁也说不好 Chrome OS 是不是那个破坏性创新者，这更多的依赖于云计算的发展；然而后者的发展似乎也是不争的事实，所以至少是存在这种可能性，将来“云”的发展把 Chrome OS 送上巅峰。

中国失掉了什么

当然，在中国，我们不需要（或者说，不能够）担心这个可能性。所有这些，都是西方大公司的游戏，跟我们并不相关（也不能相关）。我们有时间自娱自乐，可以搞一个 COS 玩玩。这一点说起来其实很有趣：我们封掉了 Google, 却避免不了 Andriod 在中国的发展；要是真有这么个未来，Chrome OS 成了主流，我们自然也不妨拿过来用（虽然这个拿过来会有很多困难）。这里的问题只不过是，好像这一切只是我们自己在自娱自乐，而且原因并不是在于我们多么强悍，不带他们玩；恰恰相反，是我们内心的虚弱不敢让我们一起做点公平的赌赛。

极客观察均为极客公园原创报道，转载请注明原文链接。

原文地址： http://www.geekpark.net/read/view/197774

基于Apache Cordova开发移动平台上的Chrome Apps

Tue, 04 Feb 2014 22:39:54 CST

不好意思，迟到的新闻，同时给大家拜个晚年，祝大家马年吉祥马上有钱！

据去年9月份的消息，Chrome Apps将可以像原生应用一样在各终端设备上离线运行，目前已经做到兼容了所有的桌面平台。而现在通过一个基于 Apache Cordova的开发者预览版工具包，Chrome Apps已经实现可以直接在Android和iOS设备上运行了。应用功能可以完全由HTML、CSS和Javascript打造。

该工具包还提供了一个shell工具以便你将你开发的应用发布到到Apple App Store和Google Play上。也提供了 developer workflow 用来为移动应用原生地打包Chrome App。你可以通过命令行或IDE调用，在设备或模拟器上运行Chrome App。或者你也可以使用 Chrome Apps Developer Tool 在安卓设备上运行你的app，这样不必安装IDE或者移动平台SDK。

Google为移动平台开发了Chrome Apps实现需要调用的各种Chrome API，包括：

identity - 身份认证，利用Oauth2实现
payments - 应用内支付（仅限Android）
pushMessaging - 消息推送
sockets - sockets通信
notifications 消息提醒（仅限Android）
storage - 本地Key－value数据存储
syncFileSystem - 基于Google Drive的文件存储
alarms - 定时任务

除了上面的这些Chrome API，还有更丰富的 Apache Cordova API及插件可供使用，Google也提供了大量的 Sample Code教程！

相信过不了多久，Google Play和Apple App Store和将涌现出各种基于Chrome Apps API打造的App。

十款值得一用的Chrome插件及Apps

Mon, 30 Dec 2013 17:06:03 CST

随着Chrome浏览器的不断完善，也许诸多用户都已把Chrome作为自己主要的上网工具。但对于部分用户来说在琳琅满目的Chrome Web Store里找到自己想要的Apps和扩展可能并不是一件容易的事，所以PingWest在此为大家推荐了一些可以提高工作、生活效率的工具类产品。

Awesome New Tab Page（改变新建标签页样式）：也许你也曾觉得Chrome的新建标签页有些单调，那么安装Awesome New Tab Page后你将会得到一个Metro风格的新标签页。除了可以方便地进入Google的大多数常用服务外，用户还可以直接在新建标签页里搜索Twitter和Facebook上的信息。此外Awesome New Tab Page还提供了一些窗口小部件，用户也可以选择自己需要的将其添加到新建标签也上。

Instagram for Chrome（浏览Instagram图片）：如果你是一位Instagram重度用户，那么这款应用也许会赢得你的喜爱。通过Instagram for Chrome用户可以方便地浏览自己Instagram的信息流、热门照片等，此外搜索和评论功能一样可以正常使用。美中不足的是用户不可以通过浏览器端发送图片。

View original size image for Picasa（查看Google+原始尺寸图片）：经常使用Google+的用户一定对不能查看信息流里原始尺寸的图片感到烦恼，从这款扩展的名称就可以看出它可以满足这个需求。安装之后，用户在Google+上的图片点击鼠标右键就可以选择查看原始尺寸图片了。

Download YouTube Videos as MP4（下载YouTube视频）：虽然Chrome Web Store里有不少下载视频的扩展，但由于Google的政策限制，这些扩展一般都不支持下载YouTube的视频，但用户只要安装这个脚本文件一样可以轻松地下载到YouTube的视频。由于该脚本并不是在Chrome Web Store中，所以安装起来略微麻烦，用户需要打开 chrome://extensions/页面，然后将下载到本地的脚本拖进去才可以成功安装。

Always Clear Downloads（自动清除下载历史记录）：是不是和我一样觉得在下载文件时Chrome浏览器下方多出一个下载横幅很多余？那么Always Clear Downloads将会帮你自动清除掉下载横幅。该扩展可以快速地清除掉下载文件的历史记录，随着文件记录被清除掉，浏览器下方的横幅自然也就消失了。

Xmarks Bookmark Sync（跨浏览器同步备份书签）：由于网站种类繁杂，所以不可避免的我们都存了很多书签，而Chrome的书签同步功能并不是100%有效，所以对书签进行双重备份还是比较重要的。Xmarks Bookmark Sync就是这么一款可以在多个浏览器之间同步书签的工具，通过它既可以实习跨浏览器同步又能防止书签丢失。

Smooth Gestures（鼠标手势操作）：Smooth Gestures曾经由于隐私问题被Google下架，不过再改正错误之后它又重新登录Chrome Web Store了。在Smooth Gestures的帮助下用户可以通过鼠标手势完成诸多浏览器操作，比如关闭标签页、重新打开刚刚关闭的标签页、新建标签页、刷新、后退、切换标签页等等都可以通过鼠标手势实现。我常用的两个手势是上滑回到页首、下滑到达页尾。

Wunderlist（任务管理工具）：Wunderlist是一款跨平台的任务管理工具，其在Chrome Web Store上并不止这一个版本，但比较下来我觉得这个版本最好，所以就介绍这一款了。用户通过Wunderlist建立的任务可以方便地在Chrome、iOS和Android之间同步而且它还是一款无广告的免费产品，所以需要的用户可以考虑升级到Pro版。

WebView（剪辑收集器）：用户安装WebView之后其图标就是一把剪刀，所以它的功能就是让用户可以把不同网页的某个部分剪辑下来汇聚到WebView标签页下以方便自己查看。这对于跟踪搜索某一类信息的用户还是比较有用的。此外，WebView也支持收藏某些剪辑的标签页。

Share Extensions（扩展/Apps分享）：看了这些扩展和Apps之后是不是觉得自己有更好的可以和其他用户分享？如果有的话就使用Share Extensions吧。这款扩展可以把用户安装的扩展和Apps信息集合起来然后输出BBCode、HTML、纯文本等格式以方便将其分享给其他用户。

事实上，Chrome Web Store中有趣的扩展和Apps远不止这些，Pocket、FaWave、Adblock Plus、Proxy SwitchySharp、Evernote Web Clipper等都有着大量的忠实用户，而 Picky Wallpapers、 20 Things I Learned About Browsers & the Web、 Chrome远程桌面一样有着其特定的用户群。由于Chrome本身就是占内存大户，而多数扩展安装之后又会一直在后台运行，所以选择扩展和Apps时还是要多考虑一些自己的需求，对于那些并不是经常需要的扩展完全可以选择禁用或者直接卸载掉。毕竟扩展是安装不完的，而电脑的性能却是受限的。

Google利用PNaCl将AmigaOS移植到Chrome

Fri, 13 Dec 2013 11:55:15 CST

为演示Portable Native Client（PNaCl）技术，Google开发者 Christian Stefansen将上世纪80年代的AmigaOS移植到Chrome。Chrome运行是一个特别的AmigaOS开源版本，Stefansen利用PNaCl将该版本的C语言代码移植运行在Chrome上。Native Client技术让Web应用程序能以接近原生代码的性能运行在浏览器上，Native Client针对的是X86架构处理器，而Portable Native Client则扩展了Native Client，变成了一个架构独立的技术，让应用程序可以运行在X86或ARM平台。最新的演示只支持Chrome 31以上版本，不支持Android和iOS。

IT瘾chrome推荐

chrome 插件开发指南（Manifest V3） - 掘金

一、什么是 Chrome插件

1.1 概述

1.2 Chrome 插件是如何工作的

1.3 延伸阅读：插件和扩展的区别

二、Chrome 插件能做什么

三、主要构成

3.1 Manifest.json

3.1.1 Manifest V2

3.1.2 Manifest V3

3.2 popup

3.2.1 概述

3.2.2 简单例子

3.3 content-scripts

3.3.1 概述

3.3.2 特性

3.3.3 简单例子

3.3.4 延伸阅读：如何访问页面中的 JS

3.4 background

3.4.1 概述

3.4.2 简单例子

四、其他展现形式

4.1 homepage_url

4.2 Options页面

4.2.1 概述

4.2.2 配置

4.3 Devtools

4.4 override（覆盖特定页面）

4.5 Omnibox

五、通讯

5.1 简单的一次性请求

5.1.1 从 content-scripts 发起请求

5.1.2 发送消息到 content-scripts

5.1.3 接受消息

5.2 长链接

5.3 跨插件通讯

5.4 从网页发送信息

5.5 Native通讯

六、如何查看某个插件的源码

七、最佳实践推荐

八、适配其他浏览器

九、发布

十、未来

参考

Octoman – 微博备份工具，可导出 HTML 文件[Chrome]

相关阅读

Chrome 开始启用深层链接技术

谷歌浏览器Chrome离线包下载

下载谷歌浏览器Chrome离线包

B站下载助手 – 地铁族必备，离线缓存 B 站视频 [Chrome]

相关阅读

12款堪称神器的 Chrome 插件，Max 你的工作效率！

无法连接 Google 服务，如何「曲线救国」顺畅使用 Chrome

哪里能找到靠谱的 Chrome 离线安装包？

除了 Chrome 商店还有哪能下载扩展？

怎么在本地备份和恢复已经装好的 Chrome 扩展？

备份扩展

恢复已备份的扩展

怎么在本地备份书签 & 个人设置？

备份书签

备份个人文件

怎么查看和备份 Chrome 保存的密码？

导出和导入密码

第三方查看备份密码的工具

Chrome 将停止支持 PNaCl ，拥抱 WebAssembly

Google推出Chrome 56，强化了安全且页面重载速度快28%

Chrome的占有率达到55%

Google Chrome v42.0.2311.135 正式版发布

Chrome推动Web的应用化

Chrome采用新压缩算法 提升网页加载速度降低数据流量消耗

Chrome移动端用户破10亿：web不死，或将消灭App

web老矣，尚能饭否？

进步的Web应用程序

将网络带到第三世界

未来的融合

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

Chrome开发者工具之JavaScript内存分析

你需要思考的问题

术语和基本概念

Chrome采用新压缩算法提升网页加载速度降低数据流量消耗