summaryrefslogtreecommitdiffstats
path: root/devtools/docs/user/web_console/split_console
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /devtools/docs/user/web_console/split_console
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/docs/user/web_console/split_console')
-rw-r--r--devtools/docs/user/web_console/split_console/index.rst26
-rw-r--r--devtools/docs/user/web_console/split_console/split-console-debugger.pngbin0 -> 36212 bytes
-rw-r--r--devtools/docs/user/web_console/split_console/split-console-show-debug.pngbin0 -> 96264 bytes
-rw-r--r--devtools/docs/user/web_console/split_console/split-console.pngbin0 -> 2347 bytes
4 files changed, 26 insertions, 0 deletions
diff --git a/devtools/docs/user/web_console/split_console/index.rst b/devtools/docs/user/web_console/split_console/index.rst
new file mode 100644
index 0000000000..13bee8efc7
--- /dev/null
+++ b/devtools/docs/user/web_console/split_console/index.rst
@@ -0,0 +1,26 @@
+=============
+Split console
+=============
+
+You can use the console alongside other tools. While you're in another tool in the Toolbox, just press :kbd:`Esc` or select the "Show split console" command in the :ref:`Toolbar <tools-toolbox-toolbar>` menu. The toolbox will now appear split, with the original tool above and the web console underneath.
+
+You can close the split console by pressing :kbd:`Esc` again, or by selecting the "Hide split console" menu command.
+
+.. image:: split-console.png
+ :class: border
+
+.. raw:: html
+
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/G2hyxhPHyXo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ <br/>
+ <br/>
+
+As usual, ``$0`` works as a shorthand for the element currently selected in the Inspector:
+
+.. image:: split-console-debugger.png
+ :class: center
+
+When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:
+
+.. image:: split-console-show-debug.png
+ :class: center
diff --git a/devtools/docs/user/web_console/split_console/split-console-debugger.png b/devtools/docs/user/web_console/split_console/split-console-debugger.png
new file mode 100644
index 0000000000..91991f487e
--- /dev/null
+++ b/devtools/docs/user/web_console/split_console/split-console-debugger.png
Binary files differ
diff --git a/devtools/docs/user/web_console/split_console/split-console-show-debug.png b/devtools/docs/user/web_console/split_console/split-console-show-debug.png
new file mode 100644
index 0000000000..3a24d6d9a1
--- /dev/null
+++ b/devtools/docs/user/web_console/split_console/split-console-show-debug.png
Binary files differ
diff --git a/devtools/docs/user/web_console/split_console/split-console.png b/devtools/docs/user/web_console/split_console/split-console.png
new file mode 100644
index 0000000000..a848139a20
--- /dev/null
+++ b/devtools/docs/user/web_console/split_console/split-console.png
Binary files differ