index.rst (1944B)
1 ============= 2 Split console 3 ============= 4 5 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. 6 7 You can close the split console by pressing :kbd:`Esc` again, or by selecting the "Hide split console" menu command. 8 9 .. image:: split-console.png 10 :alt: Screenshot highlighting the close button of the split console 11 :class: border 12 13 .. raw:: html 14 15 <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> 16 <br/> 17 <br/> 18 19 As usual, ``$0`` works as a shorthand for the element currently selected in the Inspector: 20 21 .. image:: split-console-debugger.png 22 :alt: Screenshot demonstrating how typing in $0 in the split console highlights the currently selected element on the page 23 :class: center 24 25 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: 26 27 .. image:: split-console-show-debug.png 28 :alt: Screenshot showing the split console acting within the scope of the paused statement 29 :class: center 30 31 Note that you also can disable the split console altogether, open settings in the :ref:`Toolbar <tools-toolbox-toolbar>` menu, and uncheck Enable Split Console under Web Console 32 33 .. image:: split-console-disable-feature.png 34 :alt: Screenshot showing the settings item of the Toolbar menu and the Enable Split Console checkbox in the settings 35 :class: center