Comments 62
Только работает совсем не так, как jQuery. Всякие штуки, типа $('.button').click() не сработают.
Следует иметь это в виду.
И в самом деле. У нативного HTMLElement тоже есть метод click.
Зато нет jQuery-специфичного .data().
Такое уже не сработает $('.button').data()
$$( value ) — это алиас для [].slice.call( document.querySelectorAll( value ) ).
- Результаты выражения из пункта 1 будет удобно отображать в табличном виде, как описано в пункте 6;
- При использовании табличного вида, можно указать подмножество колонок, которое необходимо отобразить;
Например:
console.table($$('.elementClass'), ['innerText', 'offsetLeft'])
Пункты 1, 2, 5, 6, 9 и 10 также работают и в ФФ. Пункт 7 inspect(...) в ФФ делает тоже самое, что и dir(...) в Хроме.
А ещё, при выборе элемента в инспекторе он становится доступен как $0 в консоли (ФФ и Хром).
А все обработчики событий (пункт 3) в ФФ можно посмотреть, если в инспекторе рядом с элементом кликнуть на кнопочку ev.
Как то я экспериментировал с Хромом и его девтулсами в качестве среды разработки. Там довольно круто сделана подсветка кода, автодополнение (хорошо видит все определения доступные в текущей области видимости и в глобальном пространстве), непосредственная близость к рантайму также интересна (рядом все профайлеры и прочие интересности). Но в целом, как IDE — не юзабельно, что очень обидно. Буквально один шаг отделяет Хром от крутейшего самодостаточного инструмента разработки фронтэнда. Интересно, почему его не делают?
Поддержки Git (хотя-бы на уровне подсветки текущих изменений), возможности установки дополнений для подсветки всяких LESS/SASS и т.п., нормальной работы с проектом в целом (сейчас может открывать файлы из папки в списке ресурсов независимо от контекста текущей вкладки). Много всего. И основная часть касается именно странностей юзабилити, в техническом плане существующие возможности — классные.
Все редакторы, использующие под капотом Electron, с которыми я имел дело (Atom, Brackets, VS Code и т. п.) — имеют ряд существенных отличий от девтулзов: они используют собственный рендер кода (иногда довольно тормозной), отделены от рантайма и DOMa непосредственно, не могут нормально ничего дебажить, не видят сетевой активности и т. д. Это просто текстовые редакторы.
И самое удивительное — то, что стили у меня в 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
все остальные плюсы для отладки были у Хрома:
Юзабилити, удобное тестирование адаптивности, и в целом понятный интерфейс.
У Гугла есть и грешок с монополией на андройде.
Благо, что все больше практичных людей покупают китайские флагманы.
Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Ожидал, что вместо `className`, `tagName`, `id` будет реальные классы, теги и id, что есть в статье на Хабре :).
clear()
Куда удобнее использовать комбинацию Ctrl + L, чем писать столько лишних букв, да и тогда консоль будет содержать:
Console was cleared
undefined
Мало кто знает о такой возможности (поиск элемента по xpath):
$x('xpath')
$.classList.toggle('hide');
При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.
Двусмысленно. Можно прочесть, как
«её «$» будет перекрыт функционалом консоли»
так и
«функционал консоли будет перекрыт её «$»».
P.S. А за познавательную статью большое спасибо!
особенно про обработчики событий. Думал что в хроме этого нет
Может есть уже какой-то ресурс?
Сегодня наткнулся. В закладке Sources (редакторе кода) Ctrl+D — работает так же как и в Sublime Text — multiselect.
$(‘id’).
А решетку?
сначала открывается консоль на нужном элементе, затем перезагружается страница вместе с кодом в консоли. Голову сломал на тему как отменить эту перезагрузку :(
Консоль разработчика Google Chrome: десять неочевидных полезностей