Інтерпретатор командного рядку

За допомогою командного рядку, наданого Веб-консоллю, можна в реальному часі інтерпретувати вирази JavaScript.

Введення виразів

Вирази безпосередньо вводяться в командний рядок, після чого натискається Enter. Для введення багаторядкових виразів після кожного рядку використовуйте Shift+Enter замість Enter.

Ввдений вираз повторюється у вікні відображення повідомлення, за ним слідує результат виразу:

Нове в Firefox 47

Починаючи з Firefox 47, якщо вираз не є завершеним при натисканні Enter, Консоль веде себе як при натисканні Shift+Enter , дозволяючи завершити введення.

Наприклад, якщо Ви вводите:

function foo() {

після якого тиснете Enter, Консоль, замість того, щоб негайно виконувати введену команду, буде поводити себе так само, як при введенні Shift+Enter, щоб продовжувати введення означення функції.

Доступ до змінних

Ви можете доступатися до змінних, означених на сторінці. Доступні як вбудовані змінні, такі як window, так і змінні, що добавлені JavaScript, такі як jQuery:

Автозаповнення

Командний рядок має можливість автозаповнення: після введення перших декількох літер з'явиться контекстне вікно з вибором варіантів можливих завершень:

Натисніть Enter бо Tab для підтвердження пропозиції, використовуйте стрілки вгору/вниз для вибору потрібного варіанту, або просто продовжуйте введення, якщо Вам не підходить жодна пропозиція.

Консоль пропонує варіанти заповнення з області видимості поточного виконуваного стеку. Це значить, що якщо Ви досягли точки переривання у функції, то отримуєте варіанти автозаповнення що містить локальні об'єкти цієї функції.

Також Ви отримуєте пропозиції для автозаповнення елементів масиву, подібно до цього:

Означення змінних

Ви можете означити свої власні змінні з можливістю подальшого доступу до них:

Історія команд

Командний рядок запам'ятовує введені команди: для переміщення назад і вперед по історії команд використовуйте стрілки вгору і вниз.

Починаючи з Firefox 39, ця історія зберігається у всіх сесіях. Щоб очистити історію, скористайтеся функцією clearHistory() .

Робота з iframes

Якщо сторінка містить вбудовані iframes, для зміни в консолі області видимості на конкретний iframe Ви можете викорисати команду cd(), після чого зможете виконувати функціїї, означені в документі, що розміщується в  iframe. Є три способи вибору iframe з використанням cd():

Можна передати елемент DOM що відповідає за iframe:

var frame = document.getElementById("frame1");
cd(frame);

Можна передати селектор CSS, що відповідає за iframe:

cd("#frame1");

Можна передати глобальний об'єкт вікна iframe:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

Для переключення контексту знову на верхній рівень вікна зробіть виклик  cd() без аргументів:

cd();

Припустимо, що в нас є документ що містить iframe:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

В iframe означена нова функція:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

Ви можете переключити контекст на iframe наступним чином:

cd("#frame1");

Тепер ви можете побачити що документ глобального вікна є iframe:

І Ви можете викликати функції, що означені в iframe:

Додаткові команди

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$(selector, element)

Looks up a CSS selector string selector , returning the first node descended from element that matches. If unspecified, element defaults to document. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

See the QuerySelector code snippet.

$$(selector, element)
Looks up a CSS selector string selector, returning an array of DOM nodes descended from element that match. If unspecified, element defaults to document. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.
$0
The currently-inspected element in the page.
$_
Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
$x(xpath, element)
Evaluates the XPath xpath expression in the context of element and returns an array of matching nodes. If unspecified, element defaults to document
keys()
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
values()
Given an object, returns a list of the values on that object; serves as a companion to keys().
clear()
Clears the console output area.
inspect()
Given an object, opens the object inspector for that object.
pprint()
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help()Deprecated since Gecko 62
:helpRequires Gecko 62
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
cd()

Switch JavaScript evaluation context to a different iframe in the page. This helper accepts multiple different ways of identifying the frame to switch to. You can supply any of the following:

  • a selector string that will be passed to document.querySelector to locate the iframe element
  • the iframe element itself
  • the content window inside the iframe

See working with iframes.

copy()
New in Firefox 38. Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
clearHistory()
New in Firefox 39. Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
:screenshot
New in Firefox 62. Create a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named:

Screen Shot yyy-mm-dd at hh.mm.ss.png

The command has the following optional parameters:
 
Command Type Description
--clipboard boolean When present, this parameter will cause the screenshot to be copied to the clipboard.
--delay number The number of seconds to delay before taking the screenshot.
--dpr number The device pixel ratio to use when taking the screenshot.
--file boolean When present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included.
--filename string The name to use in saving the file. The file should have a ".png" extension.
--fullpage boolean If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "-fullpage" will be appended to the file name.
--selector string The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.

Please refer to the Console API for more information about logging from content.