From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../debugger_map_scope.png | Bin 0 -> 19150 bytes .../index.rst | 29 +++++++++++++++++++++ .../map_scopes_context_menu.png | Bin 0 -> 21745 bytes .../map_scopes_original_code.png | Bin 0 -> 16422 bytes 4 files changed, 29 insertions(+) create mode 100644 devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png create mode 100644 devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/index.rst create mode 100644 devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png create mode 100644 devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png (limited to 'devtools/docs/user/debugger/using_the_debugger_map_scopes_feature') diff --git a/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png new file mode 100644 index 0000000000..ab769339e4 Binary files /dev/null and b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/debugger_map_scope.png differ diff --git a/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/index.rst b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/index.rst new file mode 100644 index 0000000000..c48d56f0e4 --- /dev/null +++ b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/index.rst @@ -0,0 +1,29 @@ +===================================== +Using the Debugger map scopes feature +===================================== + +This feature is useful when debugging source-mapped code. It enables you to see the variables from the original source. It’s also possible to inspect variables from the generated scopes (e.g., a bundle file with all concatenated module files). + +Let's take a look at how this works. If you want to follow along, use `this example `_. + +1. Open the `example page `_ and then open the debugger using **Tools > Web Developer > Debugger** (or press :kbd:`Ctrl` + :kbd:`I` and then select the debugger). + +2. Select the "bundle.js" file in the Sources panel on the left and then set a breakpoint at line 102 in the ``increment`` function. + +3. When you click the **increment** button on the page and hit the breakpoint, an additional section is added to the right-hand panel below the Call stack to display variables mapped from the original scope, like this: + + + .. image:: debugger_map_scope.png + :class: border + +4. As useful as this is, it would be even nicer if you could view the original code (before it was packages into the "bundle.js" file. Right-click on the source code and the context menu now includes an option to **Jump to original location** as shown below. + + .. image:: map_scopes_context_menu.png + :class: border + +5. Click **Jump to original location**. The debugger opens the file "increment.js" so you can view the original code. Notice that your breakpoint is set here in the original code as it was in the corresponding line in the "bundle.js" file. And, since Map has been checked in the Scopes panel, you also see variable symbols from the original code. + + .. image:: map_scopes_original_code.png + :class: border + +Using this feature is expensive in terms of resources, but it certainly makes your life easier when you have to debug source code that has been packaged webpack or a similar tool. diff --git a/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png new file mode 100644 index 0000000000..ee235f7e00 Binary files /dev/null and b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_context_menu.png differ diff --git a/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png new file mode 100644 index 0000000000..2dc8e558fa Binary files /dev/null and b/devtools/docs/user/debugger/using_the_debugger_map_scopes_feature/map_scopes_original_code.png differ -- cgit v1.2.3