[webkit-dev] Single location for people wanting to learn to use dev tools WAS: Blog post draft: dealing with exceptions using Web Inspector

[Yury Semikhatsky]

On Thu, Apr 14, 2011 at 1:06 AM, Ojan Vafai <ojan at chromium.org> wrote:

> Do we have a single page to point people to for learning to use the
> inspector?

We have Chromium DevTools documentations page which covers most of the
inspector functionality. There is a link to it at the end of the blog post
(http://code.google.com/chrome/devtools/). Unfortunately we don't have such
documentation at webkit.org



> Would be nice if there were a page that just linked to all the blog posts.
>
> In fact there is one(
http://code.google.com/chrome/devtools/docs/blog-posts.html) on the
DevTools documentation site. it contains links to all Web Inspector blog
posts.


On Wed, Apr 13, 2011 at 2:02 AM, Yury Semikhatsky <yurys at chromium.org>wrote:
>
>> Including the draft content inline for those who don't have post
>> permissions.
>>
>> Thanks,
>> Yury
>>
>>
>>
>> Web Inspector: Understanding Stack Traces<http://www.webkit.org/blog/?p=1544> Posted
>> by *Yury Semikhatsky* on Wednesday, April 13th, 2011 at 1:44 am
>>
>> 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.
>> Tracking exceptions
>>
>> 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.
>>
>> 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:
>>
>> 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  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.
>>
>> Printing stack traces
>>
>> 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.
>>
>>    - You can instrument your code with console.trace() calls that would
>>    print current JavaScript call stacks:
>>
>>    - 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:
>>
>>
>> Handling exceptions at runtime using window.onerror
>>
>> 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.
>>
>> Note that for more information on the recent features of the Web
>> Inspector, you can visit the Chrome DevTools<http://code.google.com/chrome/devtools/docs/overview.html> documentation
>> page.
>>
>> You can follow any responses to this entry through the RSS 2.0<http://www.webkit.org/blog/?p=1544/feed/> feed.
>> Both comments and pings are currently closed. Edit this entry.<http://www.webkit.org/blog/wp-admin/post.php?action=edit&post=1544>
>>
>> Comments are closed.
>>
>> On Wed, Apr 13, 2011 at 10:35 AM, Yury Semikhatsky <yurys at chromium.org>wrote:
>>
>>> Hello everyone,
>>>
>>> I've prepared a blog post draft(
>>> http://www.webkit.org/blog/?p=1544&preview=true) that gives an overview
>>> of various ways of dealing with JavaScript stack traces and exceptions
>>> using Web Inspector. Your comments
>>> and suggestions are welcome.
>>>
>>> Thanks,
>>> Yury
>>>
>>>
>>>
>>>
>>
>> _______________________________________________
>> webkit-dev mailing list
>> webkit-dev at lists.webkit.org
>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20110414/c19e7617/attachment.html>