中文文档
lifesinger opened this issue · 20 comments
调试插件
Sea.js 非常在意代码的可维护性，下面是用于开发调试的插件。
使用场景
以 seajs.org 为例，看 Network 中的 Scripts 请求：
sea.js
main.js
jquery.js
其中 main.js 是文档首页的核心脚本。假设这个脚本出问题了，我们要马上修复。
传统的维护方式是，将文档源码完整复制到本地，搭建好本地环境，然后进行修改和调试.... 修改好后，上传到服务器并验证。方便快速，其实我就是这么干的。
但是如果将 seajs.org 换成 alipay.com，就没那么简单了。这需要一套完备的测试环境，即便有，往往也很难做到与线上环境完全一致。
页面环境越复杂，bug 对线上数据依赖越强，则 debug 插件的威力就越大。
使用方式
seajs-debug 插件依赖于 seajs-style ，请先同步引入。
加载 Debug 插件
加载 seajs 插件有 三种方式，这里采用最常用的 URI 参数形式：
- 添加 alias：
seajs.config({
alias: {
"seajs-debug": "seajs/seajs-debug/1.1.1/seajs-debug"
}
})需要
{{seajs-base}}/seajs/seajs-debug/1.1.1/seajs-debug.js是可访问的。
- 在 URL 中添加
seajs-debug参数，比如访问 http://seajs.org/docs/?seajs-debug，页面右下角会出现一个浮层：
这样就可开启 Debug 插件了。
功能介绍
调试面板上的核心功能，如下图所示：
其中，两种编辑模式分别是：
- 映射模式：
类似于 Fiddle 的 AutoResponder 功能，输入源地址和目标地址，保存之后，
会在下次页面刷新后载入模块时，自动匹配源地址。如果匹配到，将去请求对应的目标地址，
同时，对应的输入框高亮显示以提示哪些是有用的映射。
注意：
- 匹配时是针对原始的模块 URL，而不是调用 seajs-debug 后被转换的 URL 。
- 当设置某条映射规则且开启源码显示时，先会匹配隐射后，再将隐射后的 URL 转成 -debug.js 。
- 编辑模式：
可在输入框中输入一个 Object 对象，保存之后，
会在下次页面刷新后将此对象作为 seajs.config() 参数传入，进行自定义配置。
其他
调试面板中，可以点击：
?查看帮助文档。最小化/最大化切换调试面板显示状态。SAVE保存当前面板状态，主要是可编辑内容。EXIT退出调试模式，即使载入了 seajs-debug.js ，也不会进入调试模式. 要强制开启，只能通过 URL 后加?seajs-debug的方式再次开启。- 在调试模式下，页面标题会自动添加
[Sea.js Debug Mode]前缀以供辨识。
seajs.find Function
理想情况下，CMD 模块的接口不会暴露到全局，这能有效避免全局污染，但同时也会导致在调试时不方便。
比如，在 Sea.js v1.2.0 之前，需要通过下面的方式来拿到 jQuery：
seajs.use('jquery', function($) { window.$ = $ })
// use $ to debug something...这样很不方便，我们需要更简洁的方式来快速获取已加载的模块接口。
从 Sea.js 1.2.0 开始，增加 seajs.find 方法。find 方法接收一个 selector 参数，selector 可以是字符串，也可以是正则，用来从 seajs.cache 里查找匹配的模块。
- 如果没有找到匹配的模块，则返回空数组
[] - 如果找到一个或多个匹配的模块，则返回由这些模块接口组成的数组
有了 seajs.find 后，调试就很方便了：
var $ = seajs.find('jquery')[0]
// use $ to debug somethiing...注意：仅在加载 debug 插件后，才有 seajs.find 方法。
小结
通过 debug 插件来调试的好处是：方便快捷，对调试页面所在机器无要求，开发机器上也只需要有 HTTP 服务即可。比如对于 iPad 来说，可以用 ?seajs-debug 打开配置层，让配置文件指向开发机器。这样，就可以在开发机器上写代码，刷新 iPad 上的页面立刻就可以看到修改后的效果。这种便捷，对效率提升很有帮助。
不足是：要调试的代码必须通过 SeaJS 加载，这是前提条件，必不可少。
参考
- 在线本地调试大观（要翻墙）
Debug Console 改成 textarea，直接写代码吧！
@lepture +1
[
['http://seajs.org/docs/assets/', 'http://localhost/seajs/seajs/docs/assets/']
]建议给用户暴露这样的语法接口，seajs 插件自动做其他的事情。
@lifesinger seajs-debug插件是依赖seajs-style的
@lifesinger 我跟楼上一样的问题，要不debug就会报错，debug是要依赖seajs-style的
@miyukizhang 看你需要debug的什么功能了，如果只需要查看未压缩的，可以把seajs-style的模块内容拷贝到seajs-debug源码中panel-debug.css中，就可以了，如果用其他功能，如seajs.log等还要依赖其他插件
真好用，顶起
ie11 下 已经preload 里加载了 seajs-style 插件了，但是还是报错说 对象不支持 importStyle，其他浏览器是可以的。如果是用script标签在页面直接引用seajs-style是可以的。
script 引入就好
1.0.0
- 使用 switch to source/min files 功能报错误如下：
Uncaught TypeError: Cannot read property 'exec' of undefined sea-debug.js:804
mod.callback sea-debug.js:8Module.onload sea-debug.js:590
Module.load sea-debug.js:546
onRequest sea-debug.js:657
onload
- 代码
seajs.config({
"alias": {
"$": "jquery/jquery/2.1.0/jquery",
"dnd": "arale/dnd/1.0.0/dnd",
"seajs-style": "seajs/seajs-style/1.0.2/seajs-style",
"seajs-log": "seajs/seajs-log/1.0.1/seajs-log",
"seajs-debug": "seajs/seajs-debug/1.1.1/seajs-debug",
"seajs-combo": "seajs/seajs-combo/1.0.1/seajs-combo"
},
"preload": [
"seajs-style","seajs-debug"
]
});
seajs.use(["$", "dnd"], function($, dnd) {});
seajs 的版本是？
2.2.1
使用了一个未定义的模块。完整的能传个过来看看吗？
- 所有的模块都是spm install下来的,只调用了jquery,和 dnd,想了解一下debug功能如何使用，上面是全部的代码调用，在切换成source files的时候就会报上面的错误。
- 另外你说的“完整的”是什么概念不太理解
试了下。
奇怪，看上去是个bug。依赖是seajs-style，加载的也是，运行时由debug插件map到seajs-style-debug上了。直接逻辑错误。
@lizzie 当时是故意这样写的？
seajs-style 提前同步载入，不要放到 preload 里，否则会被 seajs-debug 影响。
对。