Прочитав статью jtaby.com/2012/04/23/modern-web-development-part-1.html я узнал несколько полезных вещей, напишу-ка я их здесь дабы не забыть.
Вы можете передвигать любой HTML элемент на странице, тем самым менять его позицию относительно других элементов. Это позволяет делать забавные вещи, например:
![](https://habrastorage.org/r/w1560/storage2/5d4/d5c/927/5d4d5c927609f6bd9b3eff9baac31e89.png)
Выберите элемент в панели Elements и введите в консоли
![](https://habrastorage.org/r/w1560/storage2/026/641/d3a/026641d3aafe0a94deaa992e4b3f53d4.png)
Правый клик по элементу в панели Elements и выберите Break on Subtree Modifications: каждый раз, когда потомки этого элемента изменяются, отладчик автоматически даст вам возможность узнать что произошло:
![](https://habrastorage.org/r/w1560/storage2/a09/6a8/911/a096a89111406c1cd5751d33d6bb2667.png)
Сразу после заголовка Styles находятся две супер полезные кнопки: одна позволяет добавить новое CSS свойство для любого элемента. Вторая же позволяет посмотреть состояние элемента в нескольких состояниях, так что вы можете посмотреть как выглядит элемент в активном состоянии, когда над ним находится курсор, в фокусе..
![](https://habrastorage.org/r/w1560/storage2/454/4e3/a83/4544e3a839d76a713dd25cf6b79b9feb.png)
Кликните на имя измененного CSS файла, который находится в панели Sources. Отсюда вы можете сохранить его. Этот трюк не работает для новых селекторов которые были добавлены с помощью кнопки
Перевод строки делается с помощью комбинации клавиш Shift + Enter. Обычное нажатие Enter исполняет скрипт.
Ctrl + L.
Клик по кнопке
Command + O (для Windows и Linux — Ctrl + O) показывает список всех доступныхфайлов. Command + Shift + O показывает список всех функций (классов) текущего файла. Command + L позволяет перейти к опеределенной строке:
![](https://habrastorage.org/r/w1560/storage2/d35/482/ea4/d35482ea4737a47a2b9b3b76c215b1a8.png)
Если вы вынуждены несколько раз во время отладки проверять одно и тоже выражение или переменную — добавьте их в список Watch Expression. Теперь вы можете следить ними пока исполняется код:
![](https://habrastorage.org/r/w1560/storage2/fc8/d8c/cd5/fc8d8ccd55e7024137a4d6e94d1b58b8.png)
Из секции XHR Breakpoints в отладчике вы можете указать любой URL (или часть ссылки) и если будет исполнен XHR запрос, который отвечает вашими требованиям — скрипт остановится в точке отправки XHR запроса. Или же вы можете следить за любым XHR:
![](https://habrastorage.org/r/w780q1/storage2/1b2/626/941/1b2626941a13a4555f1fb97bc66bfb79.jpeg)
Допустим ваш коллега по работе обнаружил проблему и вместо того что бы показать вам скриншот он может сохранить события, а вы — загрузить их локально.
Drag and Drop в панели Elements
Вы можете передвигать любой HTML элемент на странице, тем самым менять его позицию относительно других элементов. Это позволяет делать забавные вещи, например:
![](https://habrastorage.org/storage2/5d4/d5c/927/5d4d5c927609f6bd9b3eff9baac31e89.png)
Быстрые ссылки на элементы из консоли
Выберите элемент в панели Elements и введите в консоли
$0
. Если вы используете jQuery — можете напечатать $($0)
, тем самим получив jQuery селектор:![](https://habrastorage.org/storage2/026/641/d3a/026641d3aafe0a94deaa992e4b3f53d4.png)
Примечание:$0
— текущий выделенный элемент,$1
— предыдущий выделенный элемент и т.д
Отладчик изменений в DOM
Правый клик по элементу в панели Elements и выберите Break on Subtree Modifications: каждый раз, когда потомки этого элемента изменяются, отладчик автоматически даст вам возможность узнать что произошло:
![](https://habrastorage.org/storage2/a09/6a8/911/a096a89111406c1cd5751d33d6bb2667.png)
Кнопки стилей
Сразу после заголовка Styles находятся две супер полезные кнопки: одна позволяет добавить новое CSS свойство для любого элемента. Вторая же позволяет посмотреть состояние элемента в нескольких состояниях, так что вы можете посмотреть как выглядит элемент в активном состоянии, когда над ним находится курсор, в фокусе..
![](https://habrastorage.org/storage2/454/4e3/a83/4544e3a839d76a713dd25cf6b79b9feb.png)
Сохранение отредактированного CSS файла с помощью инспектора
Кликните на имя измененного CSS файла, который находится в панели Sources. Отсюда вы можете сохранить его. Этот трюк не работает для новых селекторов которые были добавлены с помощью кнопки
+
или добавленных внутри element.style
, он будет работать только для измененных свойств, которые ранее существовали.Консоль — пишем команды в несколько строк
Перевод строки делается с помощью комбинации клавиш Shift + Enter. Обычное нажатие Enter исполняет скрипт.
Шорктат для быстрой очистки консоли
Ctrl + L.
Отслеживание неперехваченных исключений
Клик по кнопке
||
в панели Sources остановит исполнение скрипта в точке, где произошло неперехваченное исключение, сохранив стек вызовов и текущее состояние приложения.Go to… в панели Sources
Command + O (для Windows и Linux — Ctrl + O) показывает список всех доступныхфайлов. Command + Shift + O показывает список всех функций (классов) текущего файла. Command + L позволяет перейти к опеределенной строке:
![](https://habrastorage.org/storage2/d35/482/ea4/d35482ea4737a47a2b9b3b76c215b1a8.png)
«Запоминаем» выражения (переменные):
Если вы вынуждены несколько раз во время отладки проверять одно и тоже выражение или переменную — добавьте их в список Watch Expression. Теперь вы можете следить ними пока исполняется код:
![](https://habrastorage.org/storage2/fc8/d8c/cd5/fc8d8ccd55e7024137a4d6e94d1b58b8.png)
Отладка XHR
Из секции XHR Breakpoints в отладчике вы можете указать любой URL (или часть ссылки) и если будет исполнен XHR запрос, который отвечает вашими требованиям — скрипт остановится в точке отправки XHR запроса. Или же вы можете следить за любым XHR:
![](https://habrastorage.org/storage2/1b2/626/941/1b2626941a13a4555f1fb97bc66bfb79.jpeg)
Загрузка событий из панели Timeline другим человеком
Допустим ваш коллега по работе обнаружил проблему и вместо того что бы показать вам скриншот он может сохранить события, а вы — загрузить их локально.