Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «devtools»
[Перевод] DevTips: Советы веб-разработчику (17-32) 2015-10-15 12:22:28
... ;Переключение состояния вкладки DevTools при помощи горячих ... DOM-элемент из DevTools консоли
& ...
+ развернуть текст сохранённая копия
Продолжение цикла переводов полезных советов для веб-разработчика. Предыдущая часть: 1-16.
Содержание:
17. Быстрое редактирование названия HTML-тега в панели «Elements»
18. Разворачивание всех дочерних узлов выбранного элемента
19. Переключение состояния вкладки DevTools при помощи горячих клавиш
20. Переключение на DOM-элемент из DevTools консоли
21. Подсветка выполняемого выражения
22. Улучшения в работе инструмента Color Picker
23. Включение точки останова и навигация по стеку вызовов при помощи горячих клавиш
24. Просмотр определения функции, зарегистрированной как обработчик события на DOM-элементе
25. Нотификация о JS-ошибке во время написания кода
26. Персистентность настроек отображения для режима «Инкогнито»
27. Визуализация выбранного режима сглаживания анимации
28. Просмотр и изменения точек останова DOM-дерева при помощи панели «Breakpoints»
29. Пять интересных возможностей панели «Console»
30. Автодополнение свойств и методов объекта в панели «Console»
31. Просмотр и отладка обработчиков событий
32. Автоматическая остановка выполнения программы при возникновении любых исключений
Читать дальше →
Тэги: chrome, debug, devtips, devtools, google, group, mail.ru, блог, веб-разработка, компании
[Перевод] DevTips: Советы веб-разработчику (1-16) 2015-10-09 13:23:13
... жилось лучше. Chrome DevTools — пример замечательного ... изменений файлов через DevTools
+ развернуть текст сохранённая копия
Команда браузера Google Chrome проделывает огромную работу для того, чтобы разработчикам жилось лучше. Chrome DevTools — пример замечательного инструмента, сильно упрощающего отладку вашего веб-приложения. Но подчас не весь функционал этой системы виден с первого взгляда, поэтому Umar Hansa — программист из Лондона — описывает его на своем сайте, причем в весьма удобном формате: немного текста и короткий скринкаст. А мы, в свою очередь, решили сделать эти советы более доступными русскоязычной аудитории.
Содержание:
- Перенаправление порта позволит вам открывать локальные ссылки на мобильном устройстве
- Активация псевдо-классов DOM-элемента
- Повтор сетевого запроса при помощи cURL
- Запуск сохранённых блоков кода (сниппетов) на любой веб-странице
- Отслеживание изменений файлов через DevTools
- Простая запись действий страницы
- Поиск элементов DOM-дерева при помощи CSS-селекторов
- Копирование изображения в формате Data URI
- Переход к нужной строке при открытии файла
- Упрощенная навигация между правками
- Копирование ответа на сетевой запрос
- Работа с несколькими курсорами при редактировании скриптов
- Блочное выделение
- Быстрый мониторинг событий в консоли
- Доступ к выбранному DOM-узлу в консоли
- Отслеживание незавершенных сетевых запросов при помощи фильтра is:running
Читать дальше →
Тэги: debug, devtips, devtools, group, mail.ru, блог, веб-разработка, компании
[Из песочницы] Проблемы поиска утечки памяти в веб-приложении с помощью Chrome DevTools 2014-09-11 11:43:03
Браузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть ...
+ развернуть текст сохранённая копия
Браузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть в Яндекс.Браузере, новой Опере, и в других браузерах, основанных на базе Chromium.
Среди них есть потрясающие инструменты для работы с памятью, ознакомиться с которыми можно в статье пользователя Panya — «Как находить и устранять утечки памяти на примере Яндекс.Почты».
Javascript хранит объект в памяти до тех пор, пока на него есть хоть одна ссылка. Как только вы удаляете все ссылки на объект, он уничтожается сборщиком мусора.
Таким образом, чтобы удалить объект, нужно удалить все ссылки на него.
Это кажется очень простым, но есть несколько достаточно неожиданных «мест» где могут храниться ссылки на объекты, тем самым задерживая их удаление, и создавая утечку памяти. Читать дальше →
Тэги: chrome, devtools, javascript, web-разработка, веб-разработка, отладка
[Перевод] Отладка асинхронного JavaScript с помощью Chrome DevTools 2014-04-06 23:16:29
... в Chrome Canary DevTools вы можете отслеживать ...
+ развернуть текст сохранённая копия
Вступление
Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.
К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!
Под катом 10Mb трафика
Тэги: async, chrome, devtools, google, javascript, веб-разработка, перевод
Сниппеты для Chrome DevTools 2013-09-07 16:31:31
... ».
Открыть DevTools: «Settings» — « ... перезагрузки во вкладке DevTools «Sources» появится ...
+ развернуть текст сохранённая копия
Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.
Сниппеты в Google Chrome
Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:
- Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
- Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
- После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:
Читать дальше →
Тэги: chrome, devtools, front-end, google, javascript, браузеры, веб-разработка, разработка, сниппеты
Главная / Главные темы / Тэг «devtools»
|
Взлеты Топ 5
Падения Топ 5
|