完整目录请见Odoo 14全新前端框架 OWL(Odoo Web Library)官方文档中文版
🦉 如何调试 Owl应用？ 🦉
大一些应用很快就会变得难以掌控。有其行为进行稳固的理解会很有必要。为此，将有用的信息进行日志打印极其有价值。有一个可在应用中运行的javascript文件。
在进行执行后，它会在每个组件主钩子中记录下大量的信息。以下是精简后方便拷贝/粘贴的版本：
|
1 2 3 4 5 6 7 8 9 |
function debugOwl(t,e){let n,o="[OWL_DEBUG]";function r(t){let e;try{e=JSON.stringify(t||{})}catch(t){e="<JSON error>"}return e.length>200&&(e=e.slice(0,200)+"..."),e}if(Object.defineProperty(t.Component,"current",{get:()=>n,set(s){n=s;const i=s.constructor.name;if(e.componentBlackList&&e.componentBlackList.test(i))return;if(e.componentWhiteList&&!e.componentWhiteList.test(i))return;let l;Object.defineProperty(n,"__owl__",{get:()=>l,set(n){!function(n,s,i){let l=`${s}<id=${i}>`,c=t=>console.log(`${o} ${l} ${t}`),u=t=>(!e.methodBlackList||!e.methodBlackList.includes(t))&&!(e.methodWhiteList&&!e.methodWhiteList.includes(t));u("constructor")&&c(`constructor, props=${r(n.props)}`);u("willStart")&&t.hooks.onWillStart(()=>{c("willStart")});u("mounted")&&t.hooks.onMounted(()=>{c("mounted")});u("willUpdateProps")&&t.hooks.onWillUpdateProps(t=>{c(`willUpdateProps, nextprops=${r(t)}`)});u("willPatch")&&t.hooks.onWillPatch(()=>{c("willPatch")});u("patched")&&t.hooks.onPatched(()=>{c("patched")});u("willUnmount")&&t.hooks.onWillUnmount(()=>{c("willUnmount")});const d=n.__render.bind(n);n.__render=function(...t){c("rendering template"),d(...t)};const h=n.render.bind(n);n.render=function(...t){const e=n.__owl__;let o="render";return e.isMounted||e.currentFiber||(o+=" (warning: component is not mounted, this render has no effect)"),c(o),h(...t)};const p=n.mount.bind(n);n.mount=function(...t){return c("mount"),p(...t)}}(s,i,(l=n).id)}})}}),e.logScheduler){let e=t.Component.scheduler.start,n=t.Component.scheduler.stop;t.Component.scheduler.start=function(){this.isRunning||console.log(`${o} scheduler: start running tasks queue`),e.call(this)},t.Component.scheduler.stop=function(){this.isRunning&&console.log(`${o} scheduler: stop running tasks queue`),n.call(this)}}if(e.logStore){let e=t.Store.prototype.dispatch;t.Store.prototype.dispatch=function(t,...n){return console.log(`${o} store: action '${t}' dispatched. Payload: '${r(n)}'`),e.call(this,t,...n)}}} debugOwl(owl, { // componentBlackList: /App/, // regexp // componentWhiteList: /SomeComponent/, // regexp // methodBlackList: ["mounted"], // list of method names // methodWhiteList: ["willStart"], // list of method names logScheduler: false, // display/mute scheduler logs logStore: true, // display/mute store logs }); |
以代码中要拷贝至owl应用主javascript文件中，就会记录下如下的信息：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[OWL_DEBUG] TodoApp<id=1> constructor, props={} [OWL_DEBUG] TodoApp<id=1> mount [OWL_DEBUG] TodoApp<id=1> willStart [OWL_DEBUG] TodoApp<id=1> rendering template [OWL_DEBUG] TodoItem<id=2> constructor, props={"id":2,"completed":false,"title":"hey"} [OWL_DEBUG] TodoItem<id=2> willStart [OWL_DEBUG] TodoItem<id=3> constructor, props={"id":4,"completed":false,"title":"aaa"} [OWL_DEBUG] TodoItem<id=3> willStart [OWL_DEBUG] TodoItem<id=2> rendering template [OWL_DEBUG] TodoItem<id=3> rendering template [OWL_DEBUG] TodoItem<id=3> mounted [OWL_DEBUG] TodoItem<id=2> mounted [OWL_DEBUG] TodoApp<id=1> mounted |
每个组件都有其内部 id，对于调试会很有帮助。
在应用的某处运行该代码会很有益，可获取一种一框架内每个用户动作背后含义的感觉。