Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Как сохранить изменения стилей из консоли chrome. Chrome консоль браузера


Отладка в браузере Chrome - Выполнение скриптов на стороне клиента JavaScript, jqvery, BackBone

Перед тем, как двигаться дальше, поговорим об отладке скриптов.

Все современные браузеры поддерживают для этого «инструменты разработчика». Исправление ошибок с их помощью намного проще и быстрее.

На текущий момент самые многофункциональные инструменты — в браузере Chrome. Также очень хорош Firebug (для Firefox).

Общий вид панели Sources

Зайдите на страницу tutorial/debugging/pow/index.html браузером Chrome.

Откройте инструменты разработчика: F12 или в меню Инструменты > Инструменты Разработчика.

Выберите сверху Sources:

Кнопки, которые мы будем использовать:

  1. Раскрывает список скриптов и стилей, подключённых к странице.
  2. Включает-выключает консоль (ESC).
  3. Двойное нажатие на эту кнопку заставляет отладчик останавливаться на ошибках JavaScript (кнопка поменяет цвет на фиолетовый).
  4. Код можно отлаживать в отформатированном виде, если включить эту кнопку.
  5. Панель управления потоком исполнения в режиме отладки. Нам она скоро понадобится.

Точки остановки

Зашли на страницу? Раскройте список скриптов, нажав на кнопку 1, и выберите pow.js. Кликните на 6й строке, прямо на цифре 6.

Поздравляю! Вы поставили свой первый «брейкпойнт».

Слово Брейкпойнт (breakpoint) — часто используемый английский жаргонизм. В русскоязычных пособиях используется термин «точка остановки». Это то место в коде, где отладчик будет останавливать выполнение JavaScript, как только оно до него дойдёт.

В остановленном коде можно посмотреть любые переменные, выполнить команды и т.п.

Справа-снизу находится вкладка Breakpoints, в ней можно:

  • Просматривать точки остановки.
  • Выключать их кликом на чекбокс.
  • При клике на точку остановки происходит переход на соответствующее место кода (удобно, когда их много).

 

 

Остановиться и осмотреться

Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать JavaScript — перезагрузить её. Итак, нажимаем F5.

Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6й строке.

Обратите внимание на информационные вкладки справа (отмечены стрелками).

В них мы можем посмотреть текущее состояние:

  1. Watch Expressions — показывает текущие значения любых выражений.

    Можно раскрыть эту вкладку, нажать мышью + на ней и ввести любое выражение или имя переменной. Отладчик будет отображать его значение.

  2. Call Stack — вложенные вызовы (иначе называют «стек вызовов»).

    На текущий момент видно, отладчик находится в функции pow (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).

  3. Scope Variables — переменные.

    На текущий момент строка 6 ещё не выполнилась, поэтому result равен undefined.

    В Local показываются переменные функции: объявленные через var и параметры. Вы также можете там видеть переменную this, она создаётся автоматически. Если вы не знаете, что она означает — ничего страшного, мы это обсудим в главе Контекст this в деталях.

    В Global — глобальные переменные, которые находятся вне функций.

Управление выполнением

Пришло время погонять скрипт и «оттрейсить» (от англ. trace, отслеживать) его работу.

Обратим внимание на панель управления в ней есть 4 основные кнопки:

 — продолжить выполнение (F8).Если скрипт не встретит новых точек остановки, то на этом работа в отладчике закончится.

Нажмите на эту кнопку.

Вы увидите, что отладчик остался на той же строке, но в Call Stack появился новый вызов. Это произошло потому, что в 6й строке находится рекурсивный вызов функции pow, т.е. управление перешло в неё опять, но с другими аргументами.

Походите по стеку вверх-вниз — вы увидите, что действительно аргументы разные.

 — сделать шаг, не заходя внутрь функции (F10).Выполняет одну строку скрипта. Если в ней есть вызов функции — то отладчик обходит его стороной, т.е. не переходит на код внутри.

Нажмите на эту кнопку.

Отладчик перейдёт на строку 7. Всё правильно, хотя есть и тонкость.

Дело в том, что во вложенном вызове pow есть брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда. Даже если вложенный вызов и нажата эта кнопка.

…Но в данном случае вложенный вызов будет с n=1, поэтому сработает if и до строки 6 управление не дойдёт. Поэтому и остановки нет.

 — сделать шаг (F11).Переходит на следующую строку кода. Если есть вложенный вызов, то внутрь функции. — выполнять до выхода из текущей функции (Shift + F11).Как только текущая функция завершилась, отладчик тут же останавливает скрипт.

Удобно в случае, если мы нечаянно вошли во вложенный вызов, который нам совсем не интересен — чтобы быстро из него выйти.

 — отключить/включить все точки остановки.Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.

Процесс отладки заключается в том, что мы останавливаем скрипт, смотрим, что с переменными, переходим дальше и ищем, где поведение отклоняется от правильного.

 

Правый клик на номер строки позволяет запустить выполнение кода до неё (Continue to here).

Это очень удобно, если промежуточные строки нас не интересуют.

 

Консоль

При отладке, кроме просмотра переменных, бывает полезно запускать команды JavaScript. Для этого нужна консоль.

В неё можно перейти, нажав кнопку «Console» вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку  или клавишей ESC.

Самая любимая команда разработчиков: console.log(...).

Она пишет переданные ей аргументы в консоль, например:

 

Полную информацию по специальным командам консоли вы можете получить на страницеhttp://firebug.ru/commandline.html. Эти команды также действуют в Firebug (отладчик для браузера Firefox).

Консоль поддерживают все браузеры, но IE<10 поддерживает не все функции. Логирование работает везде, пользуйтесь им вместо alert.

Ошибки

Ошибки JavaScript выводятся в консоли.

Например, откройте страницу tutorial/debugging/pow-error/index.html. Предыдущую отладку можно прекратить (очистить брейкпойнты  и затем продолжить ).

В консоли вы увидите что-то подобное: 

Да, действительно, это потому что в этом скрипте есть ошибка. Но в чём же дело? Давайте посмотрим, какие были значения переменных на момент отладки. Для этого заставим отладчик остановиться при ошибке, нажав два раза на  (до фиолетового цвета).

Кстати, чтобы увидеть эту кнопку, нужно быть именно во вкладке Sources, не в Console.

Теперь перезагрузите страницу. Отладчик остановится на строке с ошибкой:

Можно посмотреть значения переменных. Поставить брейкпойнты раньше по коду и посмотреть, что привело к такой печальной картине.

В данном случае-то всё просто: опечатка в имени переменной y вместо x. Этот тип ошибки называетсяReferenceError.

Итого

Отладчик позволяет:

  • Останавливаться на отмеченном месте (breakpoint) или по команде debugger.
  • Выполнять код — по одной строке или до определённого места.
  • Смотреть переменные, выполнять команды в консоли и т.п.

В этой статье кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом.

Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements — позволяет работать со страницей (понадобится позже), Timeline — смотреть, что именно делает браузер и сколько это у него занимает и т.п.

Осваивать можно двумя путями:

  1. Официальная документация (на англ.)
  2. Кликать правой кнопкой и двойным кликом в разных местах и смотреть, что получается.

intellect.ml

Как сохранить изменения стилей из консоли chrome

Несмотря ни на что, не многие знают, как сохранить изменения стилей из консоли chrome. Об этом кратко сегодня и расскажем.

Вообще говоря, это стандартная возможность Chrome, доступная ещё с 11-го года, но малоизвестная и по сей день.

Chrome позволяет связать удаленный файл открытый в браузере с файлом в локальной файловой системе. И в него тут будут сохраняться все правки, внесенные в стили и html на странице через инспектор Chrome. Это здорово, особенно, если нужно сохранить правки, внесенные на скорую руку.

Итак, как сохранить изменения стилей из консоли chrome?

Это делается за 2 простых шага:

  • Откройте вкладу Sources инспектора chrome, кликните правой кнопкой мыши в левом поле, где выводится список файлов, и выбирите Add folder to workspace

  • После добавления папки нужно разрешить хрому работать с этой папкой

  • После этого нужно связать удаленный ресурс с локальным. Для этого выберем нужный файл (будь то html, css или js файл во вкладке Sources). Правый клик -> Map To file system resource…

 

Готово. После перезагрузки страницы, Chrome будет сам сохранять и синхронизировать все внесенные правки в локальный файл.

Подводные камни

Есть некоторая проблема с тем, в каком виде хром сохраняет измененные файлы. Они мягко говоря очень не приглядного вида. Никакого форматирования, всё сжато и уменьшено, читать и работать с этим вообще не удобно. Более того, сохраняются все браузерные стили, в том числе и дефолтные для браузера, которых нет в исходном коде редактируемого сайта, что также привносит немного путаницы в результат. Но, как ни крути, это способ сохранить и не потерять наработки сделанные на скорую руку. После такой синхронизации можно привести код в чувства при помощи клинеров кода, и бьютифаеров. После чего вычленить дефолтные стили и оставить только актуальную версию кода, которая нам так нужна. Не очень удобно, зато работает без дополнительных примочек, которые кстати, тоже работают не очень хорошо.

351

Понравилась или помогла статья? Купите мне кофе

htmler.ru

15 советов и хитростей инструментов разработчика Chrome, которые вы обязаны знать

Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.

1. Быстрая смена файлов

Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.

2. Поиск в исходном коде

Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.

3. Переход к строке

После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.

Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести ":" и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя ":" как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).

4. Выборка DOM элементов с помощью консоли

Консоль инструментов разработчика поддерживает несколько полезных «магических» функций и переменных для выборки DOM:
  • $() — эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ('DIV') вернет первый элемент DIV на странице.
  • $$ () — эквивалентно document.querySelectorAll (). Возвращает список элементов (Примечание переводчика: а именно NodeList), которые соответствуют данному CSS селектору.
  • $0 — $4 — история пяти последних элементов DOM, которые вы выбирали во вкладке Elements, где $0 будет последним.

Узнать больше функций консоли можно тут.

5. Использование нескольких кареток и выделений

При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.

6. Preserve Log

При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.

(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)

7. Прихорашивание минимизированных исходников

Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.

(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)

8. Режим устройства

Инструменты разработчика включают в себя мощный режим для разработки страниц оптимизированных под мобильные устройства. В этом видео от Google демонстрируется большинство его дополнительных функций, таких как изменение разрешения экрана, эмуляция прикосновения к сенсорному экрану и эмуляция низкокачественного сетевого соединения.

9. Эмуляция датчиков устройства

Еще одной крутой особенностью режима устройства является возможность имитации датчиков мобильных устройств, таких как сенсорные экраны и акселерометры. Вы даже можете указать ваши географические координаты. Объект расположен в нижней части вкладки Elements в Emulation -> Sensors.

10. Выбор цвета

При выборе цвета в редакторе стилей вы можете кликнуть по образцу цвета и появится окно выбора цвета. Пока это окно открыто ваш указатель мыши превращается в увеличительную лупу для выбора цвета, на странице, с точностью до пикселя.

11. Принудительное состояние элемента

Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как :hover и :focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.

12. Отображение shadow DOM

Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.

13. Выбрать следующее вхождение

Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.

14. Изменение формата цвета

С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).

15. Редактирование локальных файлов в рабочей области

Рабочие области — мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.

Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.

UPD. Примечание переводчика:

Добавленная папка будет доступна со всех вкладок. По этому если в вашем проекте больше одного HTML файла, то достаточно будет открыть его в соседней вкладке браузера.

Вы можете узнать больше о рабочих пространствах тут.

Рекомендации для дальнейшего прочтения:

Сочетания клавиш ChromeДлинный список советов и трюков в документации Chrome

habr.com

Команды адресной строки браузера Chrome

Адресная строка (омнибокс) предназначена не только для ввода ссылок и поисковых запросов, но и для быстрого доступа к настройкам, расширением и прочему.

Вот небольшой список

view-source:http://www.хромос.рф — выводит исходный код заданной страницы в текущей вкладке.

chrome://settings/ — выводит страницу со всеми настройками.

chrome://extensions/ — выводит страницу со всеми установленными расширениями.

chrome://history/ — выводит историю посещений.

chrome://help/ — показывает информацию о версии браузера и доступных обновлениях

chrome://settings/searchEngines — открывает управление плагинами поисковых систем.

chrome://settings/content — открывает настройки контента, где можно к примеру запретить выполнение сценариев JavaScript.

chrome://settings/importData — импорт закладок и настроек из других браузеров.

chrome://settings/clearBrowserData — покажет окно очистки истории.

chrome://about/ — откроет окно со списком скрытых команд адресной строки, ту же функцию выполняет и chrome://chrome-urls/.

chrome://appcache-internals/ — покажет кэш приложения.

chrome://blob-internals/ — покажет доступные BLOB-данные.

chrome://bookmarks/#1 — покажет список добавленных вами закладок.

chrome://cache/ — выведет  кэш.

chrome://crashes/ — выведет отчеты о недавних сбоях.

chrome://credits/ — список авторов компонентов браузера плюс ссылки на их домашние страницы.

chrome://dns/ — список DNS, которые Ваш браузер опрашивал

 

chrome://downloads/ — покажет список загрузок.

chrome://flags/ — экспериментальные настройки

chrome://flash/ — информация о платформе Flash, установленной на компьютере пользователя.

chrome://tracing/ — отладочное отслеживание действий (для разработчиков).

chrome://media-internals/ — показывает сведения о медиа-данных.

chrome://memory-redirect/ — показывает сведения о задействованной памяти.

chrome://net-internals/ — ещё один инструмент для мониторинга сети.

chrome://view-http-cache/ — выводит список закэшированных файлов просмотренных вами веб-страниц.

chrome://newtab — просто создает новую вкладку.

chrome://omnibox/ — в поле ввода набираете поисковую фразу, ставите нужный флажок и видите ссылки на результы поиска в Google, где напротив каждого URL стоит имя сайта, значение релевантности и ещё несколько параметров.

chrome://plugins/ — настраиваемый список подключаемых модулей.

chrome://policy/ — выводит список правил.

chrome://predictors/ — отображение сохраненной информации об автозаполнении запросов

chrome://profiler/ — отладчик

chrome://quota-internals/ — сведения о свободном месте на вашем жестком диске

chrome://terms/ — Условия предоставления услуг Google Chrome chrome://version/ — полные сведения о версии программы.

chrome://conflicts/ — Модули, загруженные в Google Chrome

А какие другие внутренние адреса (chrome://) знаете вы?

os-chrome.ru

12+ полезных Google Chrome chrome:// команд / Хабр

Все знают, что для того чтобы попасть в меню у Хрома, нужно нажать на Гаечный ключ в правом верхнем углу.

Однако есть несколько особенностей, которые не доступны из меню, которые вы можете увидеть только с помощью chrome:// команд.

Под катом приведены 12 самых полезных chrome:// команд, которые должны знать все.

1. chrome://flags
Отсюда вы можете включить некоторые экспериментальные возможности, которые скрыты в браузере Google Chrome. Обратите внимание, что как уже упоминалось на этой странице, так как они являются экспериментальными, они не могут работать как ожидалось, и могут вызвать вопросы. Включить эти возможности и использовать их Вы будете на свой страх и риск.
2. chrome://dns
На этой странице отображает список DNS, которые Ваш браузер опрашивал.
3. chrome://downloads
Эта функция также доступна из Меню->Загрузки, а также и по комбинации Ctrl + J.
4. chrome://extensions
Эта функция также доступна из Меню->Параметры->Расширения.
5. chrome://bookmarks
Эта функция также доступна из Меню->Закладки->Диспетчер закладок, а также по комбинации Ctrl+Shift+O.
6. chrome://history
Эта функция также доступна из Меню->История, а также по комбинации Ctrl+H.
7. chrome://memory
Сначала перенаправит на «chrome://memory-redirect/". Это покажет память, которую кушает браузер Google Chrome, а также все другие браузеры, работающие в системе (включая Firefox). Также там отображаются все процессы, связанные с браузером с PID, имя процесса, и память, которую они занимают.
8. chrome://net-internals
Здесь отображается вся сетевая информации. Используйте эту страницу для получения информации о сетевых событиях, генерируемых браузером. Вы можете также экспортировать эти данные. Одной из важных функций на этой странице является «Test». Если страницу не удалось загрузить, Вы можете открыть «chrome://net-internals”->»Test"-> адрес, который не удалось загрузить и нажмите на кнопку «Start Test», далее пройдет тест и появится отчёт о том, почему не удаётся открыть страницу.
9. chrome://quota-internals
Эта функция показывает информацию о дисковом пространстве, используемого браузером.
10. chrome://sessions
На этой странице показывается информацию о сессиях.
11. chrome://settings
Эта функция также доступна из Меню->Настройки (Windows), и Меню->Параметры (Linux). Здесь можно настроить все доступные параметры браузера.
12. chrome://sync-internals
Здесь отображается информация и статистика синхронизации.
Добавлено из комментариев:
chrome://gpu-internals/
Какие функции видеокарты у Вас поддерживаются и какие включены
chrome://print/
Прекрасная возможность обладателям Windows сохранить страницу в pdf

И в заключении, чтобы посмотреть все доступные chrome://команды, наберите chrome://about/ или chrome://chrome-urls/ в адресной строке браузера.

Кроме того, все упомянутые выше команды могут также вызываться при помощи команды about:

К примеру, это одинаковые команды, которые возвращают одно и то же.

about:dns chrome://dns

habr.com


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..