Tag Archives: Chrome DevTools

Debugging site in chrome from android device

Download platform tools from here — https://developer.android.com/studio/releases/platform-tools.html. Run ADB with command

Configure your phone according to this article — https://developer.android.com/studio/debug/dev-options.html (for my specific it is https://www.syncios.com/android/how-to-debug-xiaomi-mi-max-mix.html). Connect your phone to the computer with USB cable. Follow instructions from here — https://developers.google.com/web/tools/chrome-devtools/remote-debugging. When finished, stop ADB and turn off all the developer features on your …

Read more

React. Benchmarking and optimizing performance

There is a tool called react-addons-perf that should be imported into your project.

After that you can use Perf object in your console. It can tell you about your react performance issues, not including redux. For instance, you can check unnecessary renders or unnecessary change calculations:

Here’s more on that — https://reactjs.org/docs/perf.html. And …

Read more

Отладка сторонних скриптов в Google Chrome

Если у вас есть на сайте какая-нибудь вредная система, которая вставляет произвольные скрипты на сайт, то рано или поздно встаёт проблема с тем, что их нужно отладить. В Google Chrome это можно сделать так: .

Отдебажить и проинспектировать различную аналитику

https://chrome.google.com/webstore/detail/observepoint-tag-debugger/daejfbkjipkgidckemjjafiomfeabemo?hl=en-US

Как найти все обработчики на элементе в Google Chrome

Захотелось мне узнать обработчики всех событий в Google Chrome. Оказалось, это легко можно сделать, достаточно в консоли написать getEventListeners(document); https://developer.chrome.com/devtools/docs/commandline-api#geteventlistenersobject

Chrome Dev Tools Filmstrip View

Что это Это дополнительная кнопка во вкладке «Сеть» в Google Chrome, которая показывает «раскадровку». Как включить Make sure you are on Chrome 44.0.2388.0+ Go to chrome://flags Find Enable Developer Tools experiments and enable it. Click the gear icon. Go to Experiments in the left hand sidebar. Press shift 6 times to reveal hidden features. Enable …

Read more

Поиск утечек памяти через Google Chrome

На примере Яндекс-почты: http://habrahabr.ru/company/yandex/blog/195198/ Самое интересное:

Хорошее описание возможностей консолей разных браузеров

http://devtoolsecrets.com/

Отладка мобильных сайтов через Google Chrome

Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0

Быстрые клавиши для Google Chrome под Windows

https://support.google.com/chrome/answer/157179?hl=ru А то иногда забываю.