Information

Founded
Location
Россия
Website
ruvds.com
Employees
11–30 employees
Registered

Habr blog

Pull to refresh
Comments 62
Спасибо за пост, инструменты разработчика в хроме действительно волшебная штука! Хотел добавить что недавно был хром-саммит и там Пол Айриш рассказывал про самые свежие фишки, в том числе и консоли https://www.youtube.com/watch?v=HF1luRD4Qmk ( вдруг кому будет интересно )
Вау! Так $ в консоли работает даже если jQuery на странице не подключен.

Только работает совсем не так, как jQuery. Всякие штуки, типа $('.button').click() не сработают.


Следует иметь это в виду.

UFO landed and left these words here

И в самом деле. У нативного HTMLElement тоже есть метод click.


Зато нет jQuery-специфичного .data().
Такое уже не сработает $('.button').data()

$ — это алиас для document.querySelector.
$$( value ) — это алиас для [].slice.call( document.querySelectorAll( value ) ).
При желании и Array.from можно считать алиасом слайса без параметров :)
Насколько я понял из кода V8, Array.slice определен в сишном внутреннем классе массива, а Array.from() написан на JS и определен тут.
Сишный класс найти не смог, остановился тут.
В качестве неболшого добавления:
  • Результаты выражения из пункта 1 будет удобно отображать в табличном виде, как описано в пункте 6;
  • При использовании табличного вида, можно указать подмножество колонок, которое необходимо отобразить;

Например:
console.table($$('.elementClass'), ['innerText', 'offsetLeft'])
О Файрфокса консоли написать надобно, для Силы баланса :-))
Я проверил только что большинство из этих вещей в консоли Firefox Developers Edition. Они работают.
Да, наверное я слишком стар, консоль firefox мне намного ближе :)
а я о нем и говорил, блин, да это старость не видеть firefox без fifebug

Пункты 1, 2, 5, 6, 9 и 10 также работают и в ФФ. Пункт 7 inspect(...) в ФФ делает тоже самое, что и dir(...) в Хроме.
А ещё, при выборе элемента в инспекторе он становится доступен как $0 в консоли (ФФ и Хром).
А все обработчики событий (пункт 3) в ФФ можно посмотреть, если в инспекторе рядом с элементом кликнуть на кнопочку ev.

Как то я экспериментировал с Хромом и его девтулсами в качестве среды разработки. Там довольно круто сделана подсветка кода, автодополнение (хорошо видит все определения доступные в текущей области видимости и в глобальном пространстве), непосредственная близость к рантайму также интересна (рядом все профайлеры и прочие интересности). Но в целом, как IDE — не юзабельно, что очень обидно. Буквально один шаг отделяет Хром от крутейшего самодостаточного инструмента разработки фронтэнда. Интересно, почему его не делают?

На самом деле я тоже давно исследую тему использования хрома в качестве средства для разработки. А чего лично вам не хватает?

Поддержки Git (хотя-бы на уровне подсветки текущих изменений), возможности установки дополнений для подсветки всяких LESS/SASS и т.п., нормальной работы с проектом в целом (сейчас может открывать файлы из папки в списке ресурсов независимо от контекста текущей вкладки). Много всего. И основная часть касается именно странностей юзабилити, в техническом плане существующие возможности — классные.

Я как правило работаю в двух режимах, если можно так выразится: в полноценной IDE вроде webstorm, и там делаю реализацию задачи. А в хроме через workspaces дорабатываю ее напильником. Это позволяет отлаживать код и править его налету и зачастую сильно экономит мне время. Кстати там рабоает CMD + P с фазисерчем как в саблайме и этого как правило хватает
А мне вот не хватает возможности изменить запрос и отправить его прямо во вкладке «network», как это реализовано в ФФ. Очень удобная вещь.
Редактор Atom же. Это натуральный Chromium, переделанный под IDE.

Все редакторы, использующие под капотом Electron, с которыми я имел дело (Atom, Brackets, VS Code и т. п.) — имеют ряд существенных отличий от девтулзов: они используют собственный рендер кода (иногда довольно тормозной), отделены от рантайма и DOMa непосредственно, не могут нормально ничего дебажить, не видят сетевой активности и т. д. Это просто текстовые редакторы.

Дополню, можно искать элемент по xpath при помощи $x('xpath')
Недавно открыл для себя возможность редактировать стили из проекта прямо в хроме. При том что сам веб сервис задеплоен в war контейнере, хром позволяет замапить стили с веб-сервиса на локальные файлы, так что все исправления происходят прямо в папке проекта. Сам хром тут же подхватывает эти изменения.

И самое удивительное — то, что стили у меня в SCSS, а Хром в редакторе и инспекторе открывает корректный scss файл.
если не сложно, подскажите как этот настроить

Я настраивал по обучалке Sass Source Maps + Chrome = Magic. Чуть более подробно — в справке к devtools.
Если вкратце:


  • запускаем watcher который будет следить за scss и конвертировать их в css (включая ссылку на .map)
  • нужно добавить папку с scss в хром как локальный ресурс
  • настроить mapping соответствия локального ресурса удалённому.
  • Важно: все URL-ы на css должны быть без параметров (query string) — т.е. без ?key=value. Это важно. Без этого mapping не будет работать. Если css запрашиваются с параметрами (у меня так было), то на такой случай есть плагин для хрома, позволяющий убрать параметры). Сходу не нашёл — если важно, пишите — посмотрю, когда буду на работе.

Еще пара плюшек:


Плюшка №1:


var foo = { bar: [1, 2, 3] };
copy(foo);

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


Плюшка №2:


console.group();
console.log('foo');
console.log('bar');
console.log('baz');
console.groupEnd();
console.log('foobar');

Плюшка №3:


console.count(), проще прочитать: https://developer.mozilla.org/en-US/docs/Web/API/Console/count

Можно еще про горячую клавишу Chrome DevTools добавить, просто must have, экономит массу времени: Ctrl + O в инструментах разработчика, и вводим название или путь до файла для быстрого перехода к нему.


На хабре, для примера: жмем F12, Ctrl + O, вводим app.main.js, жмем Enter.

Вот что реально понравилось это обратиться по $0 к элементу, выбранному в инспекторе.
Проверил: $0 работает даже в DragonFly.
Что ещё больше добавило уверенности в том, что слова «Google Chrome» в названии для половины примеров явно излишни.
В Firebug Мозиллы мне больше понравилась только 3Д модель,
все остальные плюсы для отладки были у Хрома:
Юзабилити, удобное тестирование адаптивности, и в целом понятный интерфейс.
У Гугла есть и грешок с монополией на андройде.
Благо, что все больше практичных людей покупают китайские флагманы.
Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

Ожидал, что вместо `className`, `tagName`, `id` будет реальные классы, теги и id, что есть в статье на Хабре :).
clear()

Куда удобнее использовать комбинацию Ctrl + L, чем писать столько лишних букв, да и тогда консоль будет содержать:
Console was cleared
undefined

Ctrl + L в хроме только очищает вывод, а не удаляет переменные из памяти

Обычно этого и хотят те, кто хочет очистить консоль. Например я.

Мало кто знает о такой возможности (поиск элемента по xpath):


$x('xpath')
Забыли ещё, что просто $ указывает на текущий выделенный в elements panel элемент. Например:

$.classList.toggle('hide');
При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Двусмысленно. Можно прочесть, как
«её «$» будет перекрыт функционалом консоли»
так и
«функционал консоли будет перекрыт её «$»».

P.S. А за познавательную статью большое спасибо!
Ещё в хроме есть очень полезная возможность отладки html мобильных приложений и мобильных версий веб сайтов, прямо на реальном android-устройстве, а не только через эмуляцию. Подключаем по USB смартфон или планшет, выбираем «отладка по USB», далее в хроме открываем страницу по адресу: chrome://devices/, на устройстве открываем свой сайт и можем инспектировать его, как хотим. Подробнее: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Очень классно!!! Спасибо огромное))) Особенно понравилось: document.body.contentEditable=true!!!
Спасибо, очень здоровская информация и подсказка идеи реализации редактора. Просто веб разработкой около года занимаюсь и постепенно открываю для себя много приятных мелочей :)
UFO landed and left these words here
Познавательно, большое спасибо)
особенно про обработчики событий. Думал что в хроме этого нет
А поделитесь тогда тайными знаниями кто-то, кто знает, как в Фоксе (Инструментах разработчика) очистить консоль комбинацией или командой, поскольку clear() не работает а комбинация CTRL+L ранее работала а после какого-то обновления перестала.

версия 50.0 — что в инструментах, что в FireBug команда "clear()" работает нормально

Видимо я ранее что-то не так делал, в любом случае спасибо
Ого, при contentEditable даже картинки можно перемещать. Круто!
Вот бы эту и подобную инфу где-то опубликовать ввиде cheat sheet — что бы было очень компактно, но информативно, ну и редактировать по ходу добавления новой информации…
Может есть уже какой-то ресурс?

Сегодня наткнулся. В закладке Sources (редакторе кода) Ctrl+D — работает так же как и в Sublime Text — multiselect.

Похоже, все 10 пунктов работают также и в Safari (попробовано на версии 10.0.1).
При нажатии на «просмотреть код» в хроме происходит следующая несуразь:
сначала открывается консоль на нужном элементе, затем перезагружается страница вместе с кодом в консоли. Голову сломал на тему как отменить эту перезагрузку :(
Это какая та фича? Где взять? Покажите, как вы это делаете…
Only those users with full accounts are able to leave comments. Log in, please.