中文文档 #4

Closed
lifesinger opened this Issue Jun 29, 2013 · 20 comments

Comments

Projects
None yet
@lifesinger
Member

lifesinger commented Jun 29, 2013

调试插件

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 参数形式:

  1. 添加 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 是可访问的。

  1. 在 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 加载,这是前提条件,必不可少。

参考

@lifesinger lifesinger closed this Jun 29, 2013

@lepture

This comment has been minimized.

Show comment
Hide comment
@lepture

lepture Jun 30, 2013

Member

Debug Console 改成 textarea,直接写代码吧!

Member

lepture commented Jun 30, 2013

Debug Console 改成 textarea,直接写代码吧!

@hotoo

This comment has been minimized.

Show comment
Hide comment
@hotoo

hotoo Jun 30, 2013

Member

@lepture +1

[
  ['http://seajs.org/docs/assets/', 'http://localhost/seajs/seajs/docs/assets/']
]

建议给用户暴露这样的语法接口,seajs 插件自动做其他的事情。

Member

hotoo commented Jun 30, 2013

@lepture +1

[
  ['http://seajs.org/docs/assets/', 'http://localhost/seajs/seajs/docs/assets/']
]

建议给用户暴露这样的语法接口,seajs 插件自动做其他的事情。

@lifesinger

This comment has been minimized.

Show comment
Hide comment
@lifesinger

lifesinger Jun 30, 2013

Member

@lepture @hotoo 看这个:#3 还没时间做,不过一定会做的。

Member

lifesinger commented Jun 30, 2013

@lepture @hotoo 看这个:#3 还没时间做,不过一定会做的。

@cucygh

This comment has been minimized.

Show comment
Hide comment
@cucygh

cucygh Nov 20, 2013

@lifesinger seajs-debug插件是依赖seajs-style的

cucygh commented Nov 20, 2013

@lifesinger seajs-debug插件是依赖seajs-style的

@zhangxiaoxue

This comment has been minimized.

Show comment
Hide comment
@zhangxiaoxue

zhangxiaoxue Nov 22, 2013

@lifesinger 我跟楼上一样的问题,要不debug就会报错,debug是要依赖seajs-style的
image

@lifesinger 我跟楼上一样的问题,要不debug就会报错,debug是要依赖seajs-style的
image

@cucygh

This comment has been minimized.

Show comment
Hide comment
@cucygh

cucygh Nov 22, 2013

@miyukizhang 看你需要debug的什么功能了,如果只需要查看未压缩的,可以把seajs-style的模块内容拷贝到seajs-debug源码中panel-debug.css中,就可以了,如果用其他功能,如seajs.log等还要依赖其他插件

cucygh commented Nov 22, 2013

@miyukizhang 看你需要debug的什么功能了,如果只需要查看未压缩的,可以把seajs-style的模块内容拷贝到seajs-debug源码中panel-debug.css中,就可以了,如果用其他功能,如seajs.log等还要依赖其他插件

@bugknightyyp

This comment has been minimized.

Show comment
Hide comment
@bugknightyyp

bugknightyyp Dec 26, 2013

真好用,顶起

真好用,顶起

@bugknightyyp

This comment has been minimized.

Show comment
Hide comment
@bugknightyyp

bugknightyyp Dec 26, 2013

ie11 下 已经preload 里加载了 seajs-style 插件了,但是还是报错说 对象不支持 importStyle,其他浏览器是可以的。如果是用script标签在页面直接引用seajs-style是可以的。

ie11 下 已经preload 里加载了 seajs-style 插件了,但是还是报错说 对象不支持 importStyle,其他浏览器是可以的。如果是用script标签在页面直接引用seajs-style是可以的。

@popomore

This comment has been minimized.

Show comment
Hide comment
@popomore

popomore Dec 26, 2013

Member

script 引入就好

Member

popomore commented Dec 26, 2013

script 引入就好

@popomore

This comment has been minimized.

Show comment
Hide comment
@popomore

popomore May 27, 2014

Member

1.0.0

Member

popomore commented May 27, 2014

1.0.0

@shelter

This comment has been minimized.

Show comment
Hide comment
@shelter

shelter Jun 4, 2014

  • 使用 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) {});

shelter commented Jun 4, 2014

  • 使用 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) {});
@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Jun 4, 2014

Member

seajs 的版本是?

Member

afc163 commented Jun 4, 2014

seajs 的版本是?

@shelter

This comment has been minimized.

Show comment
Hide comment

shelter commented Jun 4, 2014

2.2.1

@army8735

This comment has been minimized.

Show comment
Hide comment
@army8735

army8735 Jun 4, 2014

Member

使用了一个未定义的模块。完整的能传个过来看看吗?

Member

army8735 commented Jun 4, 2014

使用了一个未定义的模块。完整的能传个过来看看吗?

@shelter

This comment has been minimized.

Show comment
Hide comment
@shelter

shelter Jun 4, 2014

  • 所有的模块都是spm install下来的,只调用了jquery,和 dnd,想了解一下debug功能如何使用,上面是全部的代码调用,在切换成source files的时候就会报上面的错误。
  • 另外你说的“完整的”是什么概念不太理解

shelter commented Jun 4, 2014

  • 所有的模块都是spm install下来的,只调用了jquery,和 dnd,想了解一下debug功能如何使用,上面是全部的代码调用,在切换成source files的时候就会报上面的错误。
  • 另外你说的“完整的”是什么概念不太理解
@army8735

This comment has been minimized.

Show comment
Hide comment
@army8735

army8735 Jun 4, 2014

Member

试了下。
奇怪,看上去是个bug。依赖是seajs-style,加载的也是,运行时由debug插件map到seajs-style-debug上了。直接逻辑错误。
@lizzie 当时是故意这样写的?

Member

army8735 commented Jun 4, 2014

试了下。
奇怪,看上去是个bug。依赖是seajs-style,加载的也是,运行时由debug插件map到seajs-style-debug上了。直接逻辑错误。
@lizzie 当时是故意这样写的?

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Jun 4, 2014

Member

seajs-style 提前同步载入,不要放到 preload 里,否则会被 seajs-debug 影响。

Member

afc163 commented Jun 4, 2014

seajs-style 提前同步载入,不要放到 preload 里,否则会被 seajs-debug 影响。

@shelter

This comment has been minimized.

Show comment
Hide comment
@shelter

shelter Jun 4, 2014

@afc163 也就是说seajs本身提供的插件不要使用preload来加载是么?

shelter commented Jun 4, 2014

@afc163 也就是说seajs本身提供的插件不要使用preload来加载是么?

@afc163

This comment has been minimized.

Show comment
Hide comment
@afc163

afc163 Jun 4, 2014

Member

对。

Member

afc163 commented Jun 4, 2014

对。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment