Tag Archives: Chrome DevTools
Быстрые клавиши для Google Chrome под Mac OS
https://support.google.com/chrome/answer/165450 А то иногда забываю.
Google Web Tracing Framework
https://chrome.google.com/webstore/detail/web-tracing-framework/gmdhhnlkjmknaopofnadmoamhmnlicme?hl=ru
Горяче клавиши для Google Chrome DevTools
https://developers.google.com/chrome-developer-tools/docs/shortcuts?hl=ru
Как правильно работать с Shadow DOM
Как смотреть Google Chrome DevTools → Настройки → General → Show Shadow DOM. Как пользоваться
Оптимизация загрузки сайта для мобильных устройств
http://youtu.be/YV1nKLWoARQ Слайды:https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present Основные вещи: В идеале надо стараться уложиться в 14 кБ для отрисовки первичной страницы (хотя бы для основного макета со стилями). При этом стили для этого сделать встраиваемыми, т.к. для избежания FOUC (flash of unstyled content) браузер ждет догрузки css и только после этого начинает отрисовывать страницу. Javascript стараться грузить уже после отрисовки …
Наблюдать за событиями на элементе в Google Chrome DevTools
На странице вконтактика пишем
|
1 |
monitorEvents($('#side_bar')[0], ['mouse', 'key', 'touch']) |
и водим мышкой по левому меню. Видим: Вот подробнее — http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents
Сниппеты для Google Chrome DevTools
https://github.com/bgrins/devtools-snippets#to-enable-devtools-snippets-in-chrome
Что нового в Google Chrome DevTools в 2013
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
Отладка страниц на Google Chrome for Android
https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ru Вот только в помощь, как включить режм разработчика на Android 4.2+ — http://zacktutorials.blogspot.ru/2013/03/enabling-developer-options-in-android.html Репозиторий с плагином — https://github.com/GoogleChrome/ADBPlugin Можно пробросить порты — https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ru#reverse-port-forwarding
Google Chrome Dev Tools: изменение и сохранение js и css на лету
Для этого нужен Chrome Canary. Консоль → настройки → Workspace → Add folder После этого в консоли, во вкладке Sources, можно редактировать и сохранять js-файлы (страница будет работать с уже обновлённым js, он подменяется на лету, без перезагрузки страницы). Вот инструкция с картинками — https://plus.google.com/+AddyOsmani/posts/CYXzDfg3jhC, вот видео — https://www.youtube.com/watch?v=kVSo4buDAEE. Работает также с css-файлами. Есть даже …