Do we have a single page to point people to for learning to use the inspector? Would be nice if there were a page that just linked to all the blog posts.<br><br><div class="gmail_quote">On Wed, Apr 13, 2011 at 2:02 AM, Yury Semikhatsky <span dir="ltr"><<a href="mailto:yurys@chromium.org">yurys@chromium.org</a>></span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;"><div><span style="border-collapse:collapse;font-family:arial, sans-serif;font-size:13px">Including the draft content inline for those who don't have post permissions.<div>


<br></div><div>Thanks,</div><div>Yury</div><div><br></div></span></div><div><br></div><div><br></div><div style="background-color:rgb(255, 255, 255);color:rgb(51, 51, 51);font-size:12px;line-height:1.5em;font-family:'Lucida Grande', Verdana, Arial;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:850px;background-repeat:repeat no-repeat">


<div><div><h2 style="margin-bottom:0px;text-shadow:rgb(187, 187, 187) 1px 1px 1px;font-size:16px;color:rgb(0, 51, 0) !important"><a href="http://www.webkit.org/blog/?p=1544" rel="bookmark" title="Permanent Link: Web Inspector: Understanding Stack Traces" style="text-decoration:none;color:rgb(34, 136, 17) !important" target="_blank">Web Inspector: Understanding Stack Traces</a></h2>


<small style="color:rgb(119, 119, 119)">Posted by <strong>Yury Semikhatsky</strong> on Wednesday, April 13th, 2011 at 1:44 am</small><div><p style="min-width:400px">Finding errors in JavaScript code both during application development and when it’s already released is an important part of web development. We’ve recently added a mechanism for handling uncaught JavaScript exceptions and made some improvements in the tools that allow you to work with stack traces. Now it’s a good time to summarize the ways one can deal with exceptions and stack traces in WebKit.</p>


<h3 style="margin-bottom:0px;text-shadow:rgb(187, 187, 187) 1px 1px 1px;font-size:14px;color:rgb(0, 51, 0) !important">Tracking exceptions</h3><p style="min-width:400px;margin-top:2px">When something goes wrong, you open the Web Inspector console (Ctrl+Shift+J / Cmd+Option+J) and find a number of JavaScript error messages there. Each message has a link to the file name with the line number you can navigate to.</p>


<p style="min-width:400px;text-align:center"><img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/1.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:581px;min-height:124px"></p>


<p style="min-width:400px">However, there might be several execution paths that lead to the error and it’s not always obvious which one of them has happened. Since recently, once Web Inspector window is opened, exceptions in the console are accompanied with the complete JavaScript call stacks. You can expand these console messages to see the stack frames and navigate to the corresponding locations in the code:</p>


<p style="min-width:400px;text-align:center"><img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/2.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:610px;min-height:302px"></p>


<p style="min-width:400px">You may also want to pause JavaScript execution next time exception is thrown and inspect its call stack, scope variables and state of your app. A tri-state stop button <img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/button.png" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%"> at the bottom of the Scripts panel enables you to switch between different exception handling modes: you can choose to either pause on all exception or only on the uncaught ones or you can ignore exceptions altogether.</p>


<p style="min-width:400px;text-align:center"><img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/3.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:608px;min-height:259px"></p>


<h3 style="margin-bottom:0px;text-shadow:rgb(187, 187, 187) 1px 1px 1px;font-size:14px;color:rgb(0, 51, 0) !important">Printing stack traces</h3><p style="min-width:400px;margin-top:2px">Printing log messages to the Web Inspector console is also very helpful in understanding how your application behaves. Now you can make the log entries even more informative by including associated stack traces. There are several ways of doing that.</p>


<ul style="margin-top:4px;margin-right:0px;margin-bottom:4px;margin-left:0px"><li style="margin-top:4px;margin-right:0px;margin-bottom:4px;margin-left:0px">
You can instrument your code with console.trace() calls that would print current JavaScript call stacks:<p style="min-width:400px;text-align:center"><img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/4.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:610px;min-height:302px"></p>


</li><li style="margin-top:4px;margin-right:0px;margin-bottom:4px;margin-left:0px">There is also a way to place assertion in your JavaScript code. Just call console.assert() with the error condition as the first parameter. Whenever this expression evaluates to false you will see a corresponding console record:<p style="min-width:400px;text-align:center">


<img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/5.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:593px;min-height:354px"></p>


</li></ul><h3 style="margin-bottom:0px;text-shadow:rgb(187, 187, 187) 1px 1px 1px;font-size:14px;color:rgb(0, 51, 0) !important">Handling exceptions at runtime using window.onerror</h3><p style="min-width:400px;margin-top:2px">


Recently we’ve added support for setting a handler function to window.onerror. Whenever a JavaScript exception is thrown in the window context and is not caught by any try/catch block, the function will be invoked with the exception’s message, the URL of the file where the exception was thrown and the line number in that file passed as three arguments in that order. You may find it convenient to set an error handler that would collect information about uncaught exceptions and report it back to your server.</p>


<p style="min-width:400px;text-align:center"><img src="http://www.webkit.org/blog-files/inspector/stack-traces-img/6.png" alt="" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;max-width:100%;vertical-align:top;margin-top:1em;margin-right:1em;margin-bottom:1em;margin-left:1em;width:610px;min-height:302px"></p>


<p style="min-width:400px">Note that for more information on the recent features of the Web Inspector, you can visit the <a href="http://code.google.com/chrome/devtools/docs/overview.html" style="text-decoration:none;color:rgb(34, 136, 17) !important" target="_blank">Chrome DevTools</a> documentation page.</p>


<p style="min-width:400px;background-color:rgb(248, 248, 248);border-top-width:1px;border-top-style:solid;border-top-color:rgb(221, 221, 221);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(221, 221, 221);color:rgb(119, 119, 119);font-size:8pt;font-family:Helvetica, Arial, san-serif;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px">


You can follow any responses to this entry through the <a href="http://www.webkit.org/blog/?p=1544/feed/" style="text-decoration:none;color:rgb(34, 136, 17) !important" target="_blank">RSS 2.0</a> feed. Both comments and pings are currently closed.      <a href="http://www.webkit.org/blog/wp-admin/post.php?action=edit&post=1544" title="Edit post" style="text-decoration:none;color:rgb(34, 136, 17) !important" target="_blank">Edit this entry.</a></p>


</div></div><p style="min-width:400px;color:rgb(119, 119, 119);text-align:center;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
Comments are closed.</p></div></div><div><div></div><div class="h5"><br><div class="gmail_quote">On Wed, Apr 13, 2011 at 10:35 AM, Yury Semikhatsky <span dir="ltr"><<a href="mailto:yurys@chromium.org" target="_blank">yurys@chromium.org</a>></span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<span style="border-collapse:collapse;font-family:arial, sans-serif;font-size:13px">Hello everyone,<br><br></span><div><div>
<font face="arial, sans-serif"><span style="border-collapse:collapse">I've prepared a blog post draft(</span></font><a href="http://www.webkit.org/blog/?p=1544&preview=true" target="_blank">http://www.webkit.org/blog/?p=1544&preview=true</a><font face="arial, sans-serif"><span style="border-collapse:collapse">) that gives an overview</span></font></div>



<div><font face="arial, sans-serif"><span style="border-collapse:collapse">of various ways of dealing with </span></font><font face="arial, sans-serif"><span style="border-collapse:collapse">JavaScript </span></font><span style="border-collapse:collapse;font-family:arial, sans-serif">stack traces and exceptions using Web Inspector. Your comments</span></div>



<div><span style="border-collapse:collapse;font-family:arial, sans-serif">and suggestions are welcome.</span></div><div><span style="border-collapse:collapse;font-family:arial, sans-serif"><br>
</span></div><div><span style="border-collapse:collapse;font-family:arial, sans-serif">Thanks,</span></div><div><span style="border-collapse:collapse;font-family:arial, sans-serif">Yury</span></div>
<div><font face="arial, sans-serif"><span style="border-collapse:collapse"><br></span></font></div><div><font face="arial, sans-serif"><span style="border-collapse:collapse"><br>
</span></font></div><div><font face="arial, sans-serif"><span style="border-collapse:collapse"><br></span></font></div></div>
</blockquote></div><br>
</div></div><br>_______________________________________________<br>
webkit-dev mailing list<br>
<a href="mailto:webkit-dev@lists.webkit.org">webkit-dev@lists.webkit.org</a><br>
<a href="http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev" target="_blank">http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev</a><br>
<br></blockquote></div><br>