Web Inspector: [Meta] Improve debugging of preprocessed JS

• Component: Web Inspector
• Status: NEW ---

[Nikita Vasilyev]

Created attachment 263058 [details]
[Image] Web Inspector vs Chrome DevTools

I've tried to debug React.js examples from https://facebook.github.io/react/downloads.html. It was problematic for many of them:

I hosted the examples on GitHub pages: http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/

http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/basic-jsx-external/
http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/jquery-bootstrap/

WebKit Inspector:
  – Can’t set breakpoints in example.js.
  – When Inspector was opened after the page load, example.js isn’t showed in the resources. When Inspector was opened during the page load, example.js appears twice in the list.

Chrome DevTools:
  — Works fine.


http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/basic-jsx/
http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/basic-jsx-harmony/
http://nv.github.io/webkit-inspector-bugs/react-0.14.0/examples/transitions/

WebKit Inspector:
  — Can’t set breakpoints on the text/babel inline scripts (which was converted to JS by Babel, e.g. "browser.min.js").

Chrome DevTools:
  — The preprocessed inline scripts available as “embedded” virtual resources.

[Radar WebKit Bug Importer]

<rdar://problem/23103540>