您的位置：首页 > 其它

Chrome开发人员工具使用技巧

2013-09-01 22:37 537 查看

开发中我们有时会使用load的方式加载页面（及其引入的JS），但此种方式IE、FF浏览器会将其按eval的方式载入，chrome在开发人员工具中根本无法找到，就更别谈打断点调试了，十分不利于生产环境定位问题。

这么容易就败掉了，那是不可能的。。

在JS中添加如下代码（@和sourceURL的空格是必须的）

your JavaScript Code...
//@ sourceURL=name

Chrome中，开发人员工具-Source，按Crtl+O，输入定义的name，就找到标记的JS了，之后就可以随意打断点了！（目前只有Chrome支持Source Maps）

@sourceURL and displayName in action

While not part of the source map spec the following convention allows you to make development much easier when working with evals.

This helper looks very similar to the

//@ sourceMappingURL

property and is actually mentioned in the source map V3 specifications. By including the following special comment in your code, which will be evaled, you can name evals so they appear as more logical names in your dev tools.

//@ sourceURL=source.coffee

其实Source Maps更大的用途是用来支持目前合并、压缩后的JS定位到源码，这里就不说了。

可以参考Chrome的官方教程

或者看阮一峰的这篇博客

或者再看这个

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航