Chrome 开发者工具的 js 库黑盒调试

Chrome 的 devTools 终于有了 Firefox 的 black-boxing 功能,不过叫做frameworks debugging

目前依然是试验性功能,不但还简陋,而且需要先到 chrome://flags/#enable-devtools-experiments 中开启开发者工具实验,然后再在开发者试验性项目中勾选 Enable frameworks debugging support ,这之后才能在常规面板中找到设置。

使用上没有 Firefox 的简单明了,看看正式启用后会不会有所改进。

不过在调试时就比 Firefox 的好多了,Firefox 虽然不会进入到忽略的 js 源码界面,但还是会运行进去的。但 devTools 则不会,碰上忽略的 js,使用 F11 进行单步跟踪时会表现得和使用 F10 的 Step Over 一样,非常好。

下面是一个演示

References

  1. Tips and Tricks: Ignoring library code while debugging in Chrome

解除Chrome字体最小12px的限制

Chrome 限制了最小字体是 12px,虽然一般情况下,比这还小的字体将会无法清晰查看,但非得设时,可以使用以下代码来解除限制。

1
html{-webkit-text-size-adjust:none;}

学自 chrome下最小12px字体的解决方法

P.S. airyland 提醒:不建议用这个属性来支持小字体,这样会使页面缩放时其他元素缩放了,而字体还是一样大小。

P.S. 非要用的时候,把选择符精确定位至小于 12px 的元素上,不用 html,减少影响范围。

2013/06/26

Chrome 里可以设置字体大小的下限,默认是 12,最小可以去到 6,最大可以去到 24,但问题是,不可能要求浏览者修改浏览器的设置。所以最好的方法还是:尽可能不要设计小于 12 的字,如果有,那应是不可变的(这样可用图片)。

Chrome 27 后取消了上面的技巧,所以非得要做的话可以用 -webkit-transform{scale(0.85) translate(-1px, 1px)} 这样的方式。scale 来做缩放,缩放产生了位移,再加上 translate 来平移调整。

Chrome 使用 pac 来自动代理

之所以有此文,是因为忘记在哪个版本起 Chrome 的如 ProxySwitchy 等扩展就有问题了,在代理方面很有问题,没有 Firefox 下的 autoproxy 稳定。在过了一阵子需要翻只能开 FF 的时间后,决定还是看看 Chrome 下该如何解决这个问题。

查看 chromium / google-chrome 的帮助命令,将可以看到和代理(proxy)有关的有:

1
2
3
4
--proxy-server=host:port
--no-proxy-server
--proxy-auto-detect
--proxy-pac-url=URL

可以看到,Chrome 是支持指定 pac 文件来自动代理的。这样,便可以使用 使用 pac 文件来实现自动代理 一文提到的 pac 文件了。

这样,便可以通过类似下面的命令来启动带自动代理功能的 Chrome 了。

1
google-chrome --proxy-pac-url=file:///home/user/autoproxy.pac

对于 Windows 环境,直接把 –prox-pac-url=pac-file-path 参数加到快捷方式属性中的『目标』属性的后面即可。

对于 Ubuntu 环境,Chromium 可以通过把这个参数写进 /etc/chromium-browser/default 文件中的 CHROMIUM_FLAGS 变量;对于 google-chrome,暂时没找到方便写配置的地方,干脆直接写个 sh 文件,把整条命令加进去吧(可在命令后加 & 来达到终端关闭浏览器依然存在的目的)。

小心Dom元素的name属性

对于一个用 JavaScript 获取到一个 DOM 节点的后,在说到属性的时候需要注意的是指 DOM 节点的属性还是 JavaScript 对象的属性(或说字段名)。一般来说,前者用 getAttribute/setAttribute 来访问/修改,后者用 object.field 来访问。然而,对于像 id、className 这些却属于 DOM 节点的 Attribute 范围。在说到 name 属性的时候,就更加复杂一点了,因为牵涉到 IE 的特殊处理。

当想用 setAttribute 给一个已有的(或动态创建的) DOM 元素设置 name 属性时,将会发现 IE6/7 跟 form 及相关表单元素合不来,根本就没有设置成功。

微软的文档,在 IE6/7 中,form 表单时的 name 属性是有些特殊的,用来标志提交的数据,跟平常的用途有些不一样。

When you submit a form, use the name property to bind the value of the control. The name is not the value displayed for the input type=button, input type=reset, and input type=submit input types. The internally stored value is submitted with the form, not the displayed value.

综合标准的做法,可以得到这样一个创建带 name 属性的 DOM 节点的代码: 继续阅读“小心Dom元素的name属性”

Lingoes打败IE

首先看一张图:

ie-yahoo

请认真观察上图,右下方那个是Lingoes,其显示着“123”,Lucky,那正是密码框里的内容!

Oh,多好的一件事啊!以后要是忘记了密码,可以这样来取回密码。只是,你能别人也能而已!

OK,YaHoo可以,先看看别的网站如何?

qq邮箱可以

继续阅读“Lingoes打败IE”