分类: 写写代码

  • 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 insertRow 的 bug

    按 w3c insertRow 规范的话,在没传参时,默认参数是 -1,此时,应当是把新的行插入表格底部,但 chrome 却是前插。

    insertCell 也是如此。

    关于这个问题,11 年的时候就有人报了,至今没理会,无奈。

    测试页面

  • npm 源与代理

    我大防火墙和跨国的原因,npm 和 Ruby gems 的待遇一样,慢且不时会死,所以还是切换为国内的源好点。应该有好几个源,这里选用清华的镜像源

    npm config set registry http://npm.tuna.tsinghua.edu.cn/registry
    

    代理环境下,即便终端中设置了 http_proxy 等环境变量,但 npm 在使用 nodejs 建立 http 请求时并没有使用这些值,而需要在配置文件(~/.npmrc)中添加独立的代理设置,下面是命令添加方式。

    npm config set proxy http://proxyserver:port
    

    可以通过 npm config get proxy 的返回值来看是否设置成功。

    话说,在使用 spm 时,同样需要设置代理,一开始没在文档中找到。等我跟踪源码从 install 模块到 Yuan 模块再到 config 模块来找到设置方法并成功后,不死心又去看下文档,结果轻松找到了,泪奔。

  • iOS 下的 scroll 事件

    iOS 下 Safari 支持 scroll 事件,但仅在滚动停止时触发一次,而不像 PC 端浏览器那样不停触发。带来的问题是对于比较常见的某些模块在页面滚动到一定范围则固定定位的情况将没法完美呈现,比如 msdn 页面的左树

    虽然 touchmove 事件可以连续触发,但 touchmove 要求手指不能离开屏幕,所以,对于 scroll 的问题还是没办法完全解决。

    iOS 下,Chrome 也如此,不知是否是 iOS 处于性能的要求而定下的规则。

    References

  • border 与三角形

    border,无处不在,针对三角形作个备忘。

    1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下,border 的颜色是跟随字体颜色来的。
    2. background 的覆盖范围是包括 border 的,所以在 border 的颜色是透明时,将显示 background。

    紧跟着的图片的页面来源是 JS Bin 上的一个 demo

    border 是包成一个矩形的,如下图左上。但单个 border 是如何的呢,可以看下图右上,可以看到对于交接处是采用对分的形式的。由于 background 的作用范围,所以左下图把右 border 设为透明后,显示出黑色的背景来。右下,在把 background 也设为透明后,border 处显示出更下方的内容了。

    (更多…)

  • CSS Regions

    CSS Regions 的提案很早就有了,前端观察 也在 2011 年的时候就译了 CSS3 Region:基于HTML和CSS3的富页面布局 一文,但我首次听说还是苹果的 WWDC 2013 大会。

    CSS Regions 目前依然是草案,变化可能还会很大。从目前的状态来看,和前端观察 2011 年那篇译文的写法已经有了很大的变化了。

    CSS Regions 的主要目的是把一段文档进行更加丰富的排版,如分块、分栏和中有间隔等。

    常规的分块展示内容看不出为何需要新工具。但如果需要对一段内容进行如下图那样的布局的话,问题就来了。需要计算每块能容乃的字数有多少,然后截字输出到对应模块。但还是存在着问题,对于现在的响应式布局又该如何动态调整?遇到图片呢?

    (更多…)

  • element.scrollIntoView

    有一个常见的需求是:把页面滚动到某一个元素处。

    我一直以来的做法都是计算处该元素在页面的位置,然后设置 documentElement 的 scrollTop 或用 window.scrollTo(x, y) 来实现。

    发现 DOM API 中有着一个简单的方法,并且兼容包括 IE6 等主流浏览器,那就是 element.scrollIntoView(alignWithtop) 。

    从命名可知,是把对应元素滚入可视范围,可带一参数,参数类型是 boolean,true 时表示元素顶部和滚动区域的顶部对齐,false 时元素底部和滚动区域底部对齐,不带该参数和 true 的效果一致。

    关于对齐,说的自然是尽可能对齐,当无法再滚时,不会拉伸页面来强行对齐。

    上面用「滚动区域」而不是窗口来表述对齐,说的是不单对整个页面的滚动可用,也对页面别的有滚动条的元素生效。当对某一元素应用该方法时,从最内层的滚动区域开始调整 scrollTop,没进入可视范围,再继续调整外层滚动区域的 scrollTop 。

    一个 demo

    References

  • 使用 weinre 远程调试移动端页面

    首次做移动设备,发现调试很困难。mac 平台好点,可以通过 iOS 设备直连 mac 用 safari 来 debug,又由 MIHTool 工具。

    但别的平台就惨了,虽然有跨平台的的 Adobe edge inspect,但免费版只能同时连一个客户端,而且需要通过 Adobe 的服务器来中转,速度很慢。Chrome 的 【USB 网页调试】功能就更惨了,不但需要通过官方服务器中转,这服务器还是 appspot 的,在国情面前,华丽倒下。

    一番尝试后,尝试用 weinre 来调试。

    工具说明略过,到官网翻阅。

    从我搜到的文章来看,以前是 jar 包的,目前改用 nodejs,所以以下说明仅做记录备忘,具体以官方文档为准。

    安装并测试

    安装 node.js 环境,这样已附带包管理器 npm。下一步,npm 安装 weinre。

    npm -g i weinre
    

    查看命令用法

    (更多…)

  • 使用 jQuery.windowName 进行 ajax 提交数据时的一个注意事项

    0.9.1 版本来说明,开头有这么几行代码:

    (function () { = || window.jQuery;
        var origAjax =.ajax,
            idx = 0;
        $.extend({
            ajax: function (s) {
                var remote = /^(?:\w+:)?\/\/([^\/?#]+)/,
                    data = '',
                    status = '',
                    requestDone = false,
                    xhr = null,
                    type = s.type.toUpperCase(),
                    ival = setTimeout(function () {}, 0),
                    onreadystatechange = null,
                    success = null,
                    complete = null,
                    localdom = remote.exec(s.url);
                if (s.windowname || (type === 'POST' & amp; & amp; localdom & amp; & amp; localdom[1] !== location.host)) {
    
                    // more code...
                } else {
                    return origAjax.apply(this, arguments);
                }
            }
        });
    })();
    

    留意第 11 行的判断条件,当不满足的时候将使用回普通的非跨域的 ajax 提交。

    那行的判断条件是:配置中存在着为 true 的 windowname 属性或是 post 类型的提交且存在着非同域的有效提交地址。

    所以当想确保使用跨域 ajax 提交时,需要确保进入 if 分支才行,不然服务器那边用跨域的方式返回数据,js 这边却认为是非跨域的,结果就报错了。

    由于测试的时候可能忘记了使用不同的域,所以最保险的方法是在 .ajax 方法中显式加上 windowname: 1

    今天被测试机上的这个问题搞了 2 个小时,找到真相后欲哭无泪。

    使用jquery windowname插件实现跨域提交的几个要点也提到些值得注意的地方。

  • Eclipse jvm 运行时设置代理

    平常的 Preferences -> General -> Network Connections 中的代理是 Eclipse 软件本身的,对于运行时的代码无效。

    需要对运行的代码设置代理,需要设置 jvm 的参数。在 Run -> Run Configurations 窗口中选择欲运行的文件,然后在其 Arguments -> VM arguments 中添加类似下面的代理信息:

    -Dhttp.proxyHost=192.168.11.254 -Dhttp.proxyPort=8080
    

    不过这样设置的是单个文件的参数,至于如何给一个项目或全局设置代理就还没找到资料。


    信息获取自Eclipse 编写应用程序设置代理