Leon's blog

每天活的有趣一点

正在浏览标签为 Chrome 的文章

搜索Bookmark

以前我一直不知道怎么快速搜索Bookmark,唯一知道能搜索的地方在Bookmark Manager里。但是这样必需离开当前Tab,不是很方便。 最近在使用OSX的Help菜单时,才知道原来Chrome是支持通过这个Help菜单直接进行Bookmark的搜索的。

具体步骤是,通过Command+Shift+/调出Help菜单,然后输入想要的关键字,命中的Bookmark项就会显示在菜单上。如下图:

OSX Chrome Bookmark - Help shortcut search

把当前页添加到Bookmark的任意目录下

以前我在Windows用Chrome,添加Bookmark基本上靠把地址栏里的URL直接拖拽到指定的Bookmark目录。 但是换到OSX下以后,Chrome对拖拽支持的不太好。我就换成单击地址栏后面的收藏按钮,再选择相应的目录位置了。这样有时候挺繁琐。

现在发现原来可以直接打开Bookmark,到指定目录,然后在上面右键,使用Add Page菜单搞定。感觉比在Windows下拖拽还方便些。

OSX Chrome Bookmark - Add Page

WebKit Inspector

抢沙发

Chrome Canary是Chrome最新的开发版本,几乎天天更新.可以和Chrome稳定版本共存.

打开inspector窗口

  • CMD+J or Ctrl+Shift+J in Windows, CMD+Alt+J in OSX

tips

单击右下角的设置按钮,进入设置界面,可以把inspector窗口调成Dock to Right,在宽屏下比较舒服

通过URL直接创建页面内容

data:text/html,<b>ZOMG I AM BOLD!?!!?</b>

快捷键帮助

在Elements Panel按?会显示快捷键

console

  • 使用shift + enter可以输入多行代码
  • 内置全局对象
    • $(), 通过ID查找DOM节点, 同document.getElementById()
    • $$(), 通过CSS selector查找DOM节点,同document.querySelectorAll()
    • $0, 当前页上的正在被查看(inspect)的元素
    • keys(), 返回某个对象的所有key,不包括从prototype继承来的.同object.keys
    • values(), 返回某个对象的所有value,不包括从prototype继承来的.同object.values
    • clear(), 清空console
    • inspect(), 查看(inspect)某个对象

Elements Panel

  • Break on Subtree Modifications/Break on attributes Modifications/Break on node removal 子节点内容、属性被修改试、被移除时触发断点。调试代码.应该很有用.

Network Panel

  • 蓝线是DOMContent ready事件触发时间. 页面设计时,这个时间应该越短越好.
  • 橙线是window load事件触发时间

Scripts Panel

  • {} 按钮能够Pretty print方式显示javascript, 这对那些做了压缩的javascript特别有用
  • Pause 按钮有三种状态:
    1. Don’t pause on exceptions
    2. Pause on all exceptions
    3. Pause on uncaught exceptions
  • 文件浏览
    1. CMD+O, open up a TextMate-style “Go-to-File” popover that lets you quickly jump to a file
    2. CMD + Shift+ O, open up a “Go-to-Symbol” popover that lets you quickly jump to a symbol in the current file
    3. CMD + L, will let you jump to a specific line

  • 设置断点
    • 支持Call Stack
    • Edit Breakpoint支持设置条件断点

    • XHR Breakpoints可以根据URL设置断点

    • Scope Variablessection里, 可以右键,选择Jump to Definition跳转到函数定义的位置

Timeline Panel

  • 点击Record按钮以后,会记录浏览器的各种内部操作消耗的时间和内存, 对于调试页面性能非常有效.

  • 可以Save Timeline data,保持格式是JSON.但是点击Load Timeline data时什么反应都没有,我哪里搞错了?

Profiles Panel

  • JavaScript CPU Profiler 可以定位那些js最耗时
  • CSS Selector Profiler 可以定位那些css选择器的性能有问题
  • Heap Snapshot 可以定位数组/对象/字符串等使用内存的情况

Audits Panel

  • 这个有点类似YSlow, 分析当前页面, 并给出修改建议. 例如合并js/优化cache/删除用不到的css选择器等.
  • 产品上线前应该用这个工具检测一下.

参考

  1. http://jtaby.com/2012/04/23/modern-web-development-part-1.html
  2. https://developer.mozilla.org/en/Using_the_Web_Console

昨天不小心,把Chrome浏览器的界面语言换成了中文, 结果换不回去英文了!!!
这是为啥呀? 我本来使用的是英文界面,换成中文却不让换回原来的语言,这怎么也说不过去吧.
Google了一会子也没找到什么结果,还以为是个bug.
change_chrome_UI_lang_1

后来想到在语言选择列表,选择中文语言时,也是只能用”中文(简体中文)”作为界面语言,而不能选择”中文”作为界面语言, “英语”是不是也是一样呢.
于是单击语言选项的”添加”按钮(要启用”拼写检查”这个按钮才能激活),添加了一个语言”英语(美国)”.
change_chrome_UI_lang_2

呵呵,还真是这样,现在可以把”英语(美国)”设置成界面语言了!
change_chrome_UI_lang_3

Chrome的这个语言设置还真不友好,既然添加中文是会同时添加”中文”和”中文(简体中文)”到语言选择列表,为什么不在添加英语是同时添加”英语”和”英语(美国)”呢. 这该省去我多少麻烦呀.

updated:
Safari(直至5.1)居然都没与一个修改界面语言的选项,现在只能根据系统的默认语言相应显示.
如果实在想改Safari的显示语言的话,比如”中文”改成”英文”,我现在方法是:
从”C:\Program Files\Safari\Safari.resources\en.lproj”复制并覆盖所有文件到”C:\Program Files\Safari\Safari.resources\zh_CN.lproj”.
如果要改回去, 删除”C:\Program Files\Safari\Safari.resources\zh_CN.lproj”目录就行了, Safari会自动修复这些文件的.

防止豆瓣在Chrome里面crash

抢沙发

douban_crash_in_chrome最近我访问Douban时,我的Chrome经常crash。特别是访问一些以前没
访问过的Douban的页面的时候,经常要refresh Chrome好几遍,页面才能打开。我不知道这是Chrome的问题还是Douban的问题。我使用的Chrome是6.0.401.1 。

但是今天访问Douban没出现过这个问题,让我觉得的很吃惊。Douban升级了?没听说呀。Chrome也还是那个Chrome,我也没update过。怎么回事?

突然想到昨天安装了AdBlock这个Chrome扩展。难道这个扩展除了防止广告,还有防止Douban crash的功效?于是到AdBlock的配置里把Douban从广告过滤列表里去除。再去访问Douban的同一个页面,果然Chrome又crash!配置成过滤来自Douban的广告,再试,Chrome又正常了!原来Douban在Chrome里crash,就是这点广告惹得祸呀。

真是无心插柳呀,本来是为了过滤点广告,结果还解决了Douban crash的问题。但是还是希望Douban能注意到这个问题,并早日解决。
douban_in_chrome_noaddouban_in_chrome_ad

如何屏蔽网站的广告?其实以前我不太关心这个。连我这个几乎没人访问的blog,我都放了个Google Ad,我怎么能好意思上别人的网站时,不看别人的广告呢。

但是有些网站的广告放的也实在太多了点。比如我经常使用的dict.cn, 上、下、右,都放满了广告。一眼望去,我还真不知道,那些是单词解释,那些是挂的广告。于是还是打算把dict.cn的广告屏蔽一下。

在Firefox里有个Stylish插件,可以在本地修改网站的css。比如你在Stylish给dict.cn的”#ad_top”加个”display:none”,它就不会显示了在你的浏览器里了。但是碰到广告就去编辑一下对应的css,也挺麻烦的。

如果有人维护这样一个屏蔽大多数网站广告的css,我们只要像使用杀毒软件那样,装个软件,它就自动每天更新新的广告屏蔽css该多好。顺着这个思路,我找到的就是AdBlock for Chrome。AdBlock里的filter lists大概就是这个想法,而且有中文网站的filters可以选。我不清楚的是,这个filters是AdBlock自己维护的,还是用户贡献。如果是用户贡献的那就比较牛了,新出现的广告一出来,用户就能在第一时间贡献用于广告屏蔽的css。跟开源的只要眼睛多、bug就好捉的精神一样,只要用户贡献的广告屏蔽css,网站就干净的多。应该和人肉xxx算是一类。

不管怎样AdBlock for Chrome现在的filters已经不错了,至少它有我需要的dict.cn。

来比较一下使用AdBlock的效果。
使用AdBlock之前的dict.cn:
dictcn_without_adblock

使用AdBlock之后的dict.cn:
dictcn_adblock

AdBlock for Chrome下载地址,还有AdBlock的Firefox姊Safari妹