{"id":96,"date":"2008-04-08T04:31:59","date_gmt":"2008-04-08T09:31:59","guid":{"rendered":"http:\/\/www.visophyte.org\/blog\/?p=96"},"modified":"2009-04-01T08:31:57","modified_gmt":"2009-04-01T13:31:57","slug":"pecobro-the-performance-code-browser-early-stage","status":"publish","type":"post","link":"https:\/\/www.visophyte.org\/blog\/2008\/04\/08\/pecobro-the-performance-code-browser-early-stage\/","title":{"rendered":"pecobro: the performance code browser (early stage)"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-97\" title=\"example syntax-highlighted code with sparkbar\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/code-highlighted-header-sparkbar.png\" alt=\"\" width=\"500\" height=\"85\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/code-highlighted-header-sparkbar.png 544w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/code-highlighted-header-sparkbar-300x51.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>At the beginning of <a href=\"http:\/\/www.visophyte.org\/blog\/2008\/03\/31\/mozilla-javascript-dtrace-probes-visichron-style\/\">last week<\/a>, I had gotten dtrace working on a Mac Mini using the Mozilla javascript-provider probes.\u00a0 Very cool stuff, but it left me with several questions about what would really be best to do next:<\/p>\n<ul>\n<li>How do I best understand what I&#8217;m seeing?\u00a0 (Most of the codebase is brand new to me&#8230;)<\/li>\n<li>How do I share the data with others in a way that is both comprehensible and allows them to draw their own conclusions from the data?<\/li>\n<li>What can I do to reduce the effort required to work on performance problems?<\/li>\n<\/ul>\n<p>I was tempted to just try and just dig into the system so I could have something to show immediately, but I knew it would still take a while to see the big picture just using an editor\/ctags\/lxr\/opengrok, even informed by dtrace.\u00a0 And even then, that big picture doesn&#8217;t scale well; whatever picture I managed to formulate would be stuck inside my head&#8230;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-98\" title=\"overview-svg-cropped-indexed\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/overview-svg-cropped-indexed.png\" alt=\"\" width=\"500\" height=\"333\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/overview-svg-cropped-indexed.png 629w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/overview-svg-cropped-indexed-600x399.png 600w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/overview-svg-cropped-indexed-300x199.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>So my solution was to try and build a tool that could help me accomplish my short-term goals soon, and have the potential to grow into a usable solution to all of the above&#8230; eventually.\u00a0 The goal, in a nutshell, is to provide a code browser for javascript that is able to integrate performance information (retrieved from traces) alongside the code.\u00a0 Seeing that lxr\/mxr and opengrok didn&#8217;t understand javascript or XBL all that well, it also seemed feasible to try and improve on their browsing capabilities for javascript.\u00a0 A far-down-the-road goal is also to be able to pull in information from the underlying C++ code as well, potentially leveraging dehydra, etc.\u00a0 (This would primarily be for understanding what happens when we leave the javascript layer, not trying to be the same solution for C++ space.)<\/p>\n<p>So what can it do so far?\u00a0 You can <a href=\"http:\/\/clicky.visophyte.org\/examples\/pecobro\/20080408-01\/index.xml\">go try it for yourself if you like<\/a> as long as you keep your expectations very low and realize the current state does not reflect all of the bullet points below.\u00a0 Also, you probably want firefox 3.0.\u00a0 Or you can read my bullet points:<\/p>\n<ul>\n<li>Parse custom DTrace script output!\u00a0 The Mozilla DTrace probe points could probably use a little love to improve what we are able to get out.\u00a0 Also, I think it&#8217;s betraying us somewhere.<\/li>\n<li>Parse JavaScript! Sorta!\u00a0 (I hacked in support for the regular expression syntax, but I haven&#8217;t corrected the ambiguity with division, so things with division break.\u00a0 Also, there&#8217;s at least one or two other glitches that cause early termination.) [Yay antlr!]<\/li>\n<li>Parse XBL!\u00a0 Even with entity inlining!\u00a0 Even when people put #ifdefs in the XML document! Sorta!\u00a0 We don&#8217;t actually do anything intelligent with the XBL right now or with its JavaScript, but it won&#8217;t take much to get that much improved. [Yay elementtree!]<\/li>\n<li>Visualize some stuff!\u00a0 Inter-file relationship graph in the overview.\u00a0 In the code and &#8216;Funcs&#8217; sidebar tab you get a sparkbar where each bar represents a time interval.\u00a0 The height of the par is the percentage of possible time we could have spent in that time interval.\u00a0 Red means we belive that time was spent in the function itself, green means we think we spent that time in calls to other functions. [Yay visophyte!]<\/li>\n<li>Navigate with history!\u00a0 Click on the overview graph and you go to things.\u00a0 Click on the file names in the &#8216;Files&#8217; list and you go to the files.\u00a0 I tried to make it so you could click on function names in the side bars to go to them, but jquery.scrollTo and\/or firefox 3.0b5 had serious crashing issues.\u00a0 [Yay jquery, jquery.history!]<\/li>\n<li>See syntax-highlighted code with random headings intertwined (shows the parser worked) and potentially a visualization.\u00a0 [Yay pygments!]<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-99\" title=\"sidebar-funcs-with-sparkbar\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2008\/04\/sidebar-funcs-with-sparkbar.png\" alt=\"\" width=\"191\" height=\"164\" \/><\/p>\n<p>My hope in the near-term is to fix the outright bugs (parsing issues), get XBL going, and then augment the function information with more trace-derived data including more traditional call-stacks, etc.\u00a0 Then the tool should be sufficiently usable that my immediate focus can change to creating automated tests to actually gather performance\/execution traces so we can use the tool for what I started it for.\u00a0 This may also get shelved for a while if it turns out that we need action (patches) immediately.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At the beginning of last week, I had gotten dtrace working on a Mac Mini using the Mozilla javascript-provider probes.\u00a0 Very cool stuff, but it left me with several questions about what would really be best to do next: How &hellip; <a href=\"https:\/\/www.visophyte.org\/blog\/2008\/04\/08\/pecobro-the-performance-code-browser-early-stage\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3,8,6,4],"tags":[48,50,49,26,39,51],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-mozilla","category-program-execution","category-thunderbird","category-visualizing","tag-dtrace","tag-js","tag-lightning","tag-pecobro","tag-visophyte","tag-xbl"],"_links":{"self":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":2,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}