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
|
1 2 3 |
./adb start-server # when you finished, stop it with # ./adb kill-server |
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 …
React. Benchmarking and optimizing performance
There is a tool called react-addons-perf that should be imported into your project.
|
1 2 3 |
import Perf from 'react-addons-perf'; window.Perf = Perf; |
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:
|
1 2 3 4 5 6 |
Perf.start(); // do whatever you want to measure Perf.stop(); Perf.printOperations(); // to show DOM manipulations Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards |
Here’s more on that — https://reactjs.org/docs/perf.html. And …
Отладка сторонних скриптов в 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 …
Поиск утечек памяти через 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 А то иногда забываю.