Находим самоучитель JavaScript и осваиваем Dev Tools и ScratchPad Firefox

Все как-то руки не доходили, обходился консольюю браузера... Вчера вечером таки прочитал документацию ScratchPad, вспомнил, что в свое время я его пробовал, но тогда были проблемы с подсказками, в часности с jQuery, сейчас улучшились подсказки в консоли..., так что можно работать... Чтобы загрузить любую библиотеку надо выполнить команды Shift+F2 inject http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js**
Не путать эту консоль с консолью страницы... Ctrl+Shift+k  

Веб-Консоль Помощь
Область видимости на странице "Структура javascript" на старом сайте javascript.ru
Основы javascript Здесь мы разберем основы javascript, включая синтаксис и первые примеры. Кроме того, подберем инструменты для редактирования и разработки. Этот раздел особенно рекомендуется тем, кто только начинает изучать javascript.
Developer Toolbar - shift+F2 -> help -> inject ...Так я искал способ для внедрения фрейморков (... например, jQuery) в пространство имен страницы
Debugger Инструменты разработчика Firefox
Scratchpad Инструменты разработчика Firefox Firefox Developer Tools Episode 34 WebIDE, Storage inspector, jQuery events, iframe switcher + more

Повторил пример из видео в scrathpad¶

In [1]:

%%html
<div id="main-header">Tht background of this text will removed to red by javascript below</div>

This text will be removed by javascript below

In [2]:

%%javascript
function changeHeaderBackground (id, color)
  {
    let header = document.getElementById(id);
    header.setAttribute ("style", "background-color: " + color);
    return color;
    
  };
  
changeHeaderBackground ("main-header", "#f00")

Вот этот скрипт я попробовал в sratchPad. Стоит отметить, что по умолчанию он работает в пространстве имен активной страницы, но можно переключиться в пространство имен браузера.

Running Scratchpad in the browser context // -sp-context: browser¶

You can run Scratchpad in the context of the browser as a whole rather than a specific web page. This is useful if you are working on Firefox itself or developing add-ons.
To do this check "Enable chrome and add-on debugging" in the Developer Tool Settings.
Once you've done this, the Environment menu has a Browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some globals:

In [ ]:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

In [ ]:

* The Scratchpad execution context is set to browser when a snippet file has

// -sp-context: browser

* on the first line.

Как загрузить любую библиотеку (объект) в пространство имен страницы?¶

Оказывается, все многочисленные объекты, вызываемые из штатной консоли страницы браузера ($,$$,$x ... ссылка на документацию в начале поста) - это не jQuery...
Поэтому команда вроде этой не выаолнялась...

In [ ]:

$('h1').css('background-color', 'red')

Чтобы ее выполнить, надо сначала подгрузить файл jquery.js в пространство имен

In [ ]:

* Shift+F2 -> inject http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js

Я всегда считал, что Shift+F2 открывает консоль страницы, оказывается - нет! попытка выполнить inject из Веб-консоли Ctrl+Shift+k не удалась... Впредь буду пользовать две строки...

Посты чуть ниже также могут вас заинтересовать