这篇翻译不完整。请帮忙从英语翻译这篇文章

此页面描述了Firefox 52及更高版本中显示的JavaScript调试器。 要查看早期版本的Firefox的内容,请参阅 Debugger (before Firefox 52).

If you're using Firefox 52 or later and need to switch back to the old Debugger, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:

  • sources are often combined and minified to make delivering them from the server more efficient.
  • JavaScript running in a page is often machine-generated, as when compiled from a language like CoffeeScript or TypeScript.

In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

To enable the debugger to work with a source map, you must:

  • generate the source map
  • include a comment in the transformed file, that points to the source map. The comment's syntax is like this:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:

//# sourceMappingURL=main.js.map

In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.

Finally, depending on your browser version you might have to enable this feature inside the about:config section.

  1. 为做这个,请打开浏览器并输入: about:config.
    How to open about:config inside firefox.
  2. 接受授权。​​​​​​​
    Accept about:config warranty.
  3. 搜索​​​​​​​ devtools.source-map.locations.enabled 并将其设置为​​​​​​​ ​​​​​​​true。​​​​​​​
    Change the sourcemap boolean value for devtools.

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub
 最后编辑者: xgqfrms-GitHub,