https://motioncanvas.io/assets/js/73dc39c7.73409f8f.js

1var _____WB$wombat$assign$function_____=function(name){return (globalThis._wb_wombat && globalThis._wb_wombat.local_init && globalThis._wb_wombat.local_init(name))||globalThis[name];};if(!globalThis.__WB_pmw){globalThis.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
2let window = _____WB$wombat$assign$function_____("window");
3let self = _____WB$wombat$assign$function_____("self");
4let document = _____WB$wombat$assign$function_____("document");
5let location = _____WB$wombat$assign$function_____("location");
6let top = _____WB$wombat$assign$function_____("top");
7let parent = _____WB$wombat$assign$function_____("parent");
8let frames = _____WB$wombat$assign$function_____("frames");
9let opener = _____WB$wombat$assign$function_____("opener");
10"use strict";(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[3281],{876:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>m});var o=t(2784);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?r(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=o.createContext({}),g=function(e){var n=o.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=g(e.components);return o.createElement(l.Provider,{value:n},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},u=o.forwardRef((function(e,n){var t=e.components,a=e.mdxType,r=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=g(t),u=a,m=p["".concat(l,".").concat(u)]||p[u]||d[u]||r;return t?o.createElement(m,i(i({ref:n},c),{},{components:t})):o.createElement(m,i({ref:n},c))}));function m(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=t.length,i=new Array(r);i[0]=u;var s={};for(var l in n)hasOwnProperty.call(n,l)&&(s[l]=n[l]);s.originalType=e,s[p]="string"==typeof e?e:a,i[1]=s;for(var g=2;g<r;g++)i[g]=t[g];return o.createElement.apply(null,i)}return o.createElement.apply(null,t)}u.displayName="MDXCreateElement"},8e3:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>s,toc:()=>g});var o=t(7896),a=(t(2784),t(876));const r={sidebar_position:12,slug:"/logging"},i="Logging",s={unversionedId:"getting-started/logging",id:"getting-started/logging",title:"Logging",description:"One method of debugging your co

10de or animation flow is using logging messages.",source:"@site/docs/getting-started/logging.mdx",sourceDirName:"getting-started",slug:"/logging",permalink:"/docs/logging",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/logging.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:12,frontMatter:{sidebar_position:12,slug:"/logging"},sidebar:"docs",previous:{title:"Transitions",permalink:"/docs/transitions"},next:{title:"Media",permalink:"/docs/media"}},l={},g=[{value:"Basic",id:"basic",level:2},{value:"Payloads",id:"payloads",level:2},{value:"Profiling",id:"profiling",level:2}],c={toc:g};function p(e){let{components:n,...r}=e;return(0,a.kt)("wrapper",(0,o.Z)({},c,r,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"logging"},"Logging"),(0,a.kt)("p",null,"One method of debugging your code or animation flow is using logging messages.\nFor this, motion-canvas has its own built-in way to log messages."),(0,a.kt)("p",null,"To get a reference to the Logger in motion-canvas you can use the ",(0,a.kt)("inlineCode",{parentName:"p"},"useLogger"),"\nfunction:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"import {makeScene2D} from '@motion-canvas/2d/lib/scenes';\nimport {useLogger} from '@motion-canvas/core/lib/utils';\n\nexport default makeScene2D(function* (view) {\n  const logger = useLogger();\n  // ...\n});\n")),(0,a.kt)("h2",{id:"basic"},"Basic"),(0,a.kt)("p",null,"Now that we know how to get a reference to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Logger")," we can take a look at\ndifferent ways to log messages. On way is to use standard logging functions like\n",(0,a.kt)("inlineCode",{parentName:"p"},"debug"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"info"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"warn")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"error")," and simply log a string:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-tsx"},"logger.debug('Just here to debug some code.');\nlogger.info('All fine just a little info.');\nlogger.warn('Be careful somethis has gone wrong.');\nlogger.error('Ups. An error occured.');\n")),(0,a.kt)("p",null,"These messages get then displayed in the UI under the ",(0,a.kt)("inlineCode",{parentName:"p"},"Console")," tab on the left\nside."),(0,a.kt)("h2",{id:"payloads"},"Payloads"),(0,a.kt)("p",null,"In some cases you might want to have a bit more detail in your log messages like\na ",(0,a.kt)("inlineCode",{parentName:"p"},"stacktrace")," or an ",(0,a.kt)("inlineCode",{parentName:"p"},"object"),". That's where\n",(0,a.kt)("a",{parentName:"p",href:"/api/core/index/LogPayload"},(0,a.kt)("inlineCode",{parentName:"a"},"LogPayloads"))," come in. These can be used to\nprovide more information to your log messages."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"logger.debug({\n  message: 'Some more advanced logging',\n  remarks: 'Some remarks about this log. Can also contain <b>HTML</b> tags.',\n  object: {\n    someProperty: 'some property value',\n  },\n  durationMs: 200,\n  stack: new Error('').stack,\n});\n")),(0,a.kt)("p",null,"This creates a collapsed log message in the UI which can be expanded to view all\nthe details provided."),(0,a.kt)("p",null,(0,a.kt)("img",{src:t(632).Z,width:"687",height:"571"})),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"If you quickly want to debug something you can also ",(0,a.kt)("inlineCode",{parentName:"p"},"debug()"),". That way you\ndon't have to ",(0,a.kt)("inlineCode",{parentName:"p"},"useLogger")," manually and create a payload.")),(0,a.kt)("h2",{id:"profiling"},"Profiling"),(0,a.kt)("p",null,"Besides logging messages its also possible to profile certain sections of code\nwith the ",(0,a.kt)("a",{parentName:"p",href:"/api/core/index/Logger"},(0,a.kt)("inlineCode",{parentName:"a"},"Logger")),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"logger.profile('id'); // <-- starts the profiling\n// some expensive calculation\nlogger.profile('id'); // <-- ends the profiling\n")))}p.isMDXComponent=!0},632:(e,n,t)=>{t.d(n,{Z:()=>o});const o=t.p+"assets/images/logpayload-message-7fb33242e887ad1cc04f6d894cbed8a8.png"}}]);