Google Chrome Developer Toolkit работает медленно

Question

Я уже некоторое время с большим успехом использую набор инструментов разработчика Google Chrome (проверка элементов, трассировка стека, отладка javascript и т. Д.).,Например, когда я щелкаю правой кнопкой мыши элемент в пользовательском интерфейсе и затем нажимаю «Проверить элемент», или когда я просто нажимаю F12, окно кода занимает 30-45 секунд, чтобы появиться.Раньше это случалось менее чем за секунду.

Кто-нибудь еще сталкивался с этой проблемой?Если да, то смогли ли вы это исправить?Как?

Заранее спасибо!

Мэтт

Answer 1

У меня была такая же проблема, безуспешно пробовал одни и те же решения, пока я не запустил procmon и не увидел, что Chrome фактически читает всю мою папку Projects (которая стоит несколько сотен тысяч файлов).

Ссылка на эту папку была в разделе Рабочая область / Папки в приложении Настройки инструментов dev.Удаление ссылки решило проблему.

Answer 2

Это было решено путем очистки моего кэша (временных файлов, файлов cookie и т. Д.) В Chrome.Не уверен, что было основной причиной, но это решило проблему.

Answer 3

У меня была такая же проблема.

Моя проблема заключалась в том, что я использовал browserify для создания SOURCEMAP большого пакета (~ 92 тыс. Строк). browserify app.js -d -o bundle.js.

Я решил это, разделив мой bundle.js.

Я экспортировал все модули узлов в отдельный файл (modules.js), добавив --require [module name]:

browserify -r react -r lodash -r three > build/modules.js

, а затем создайте bundle.js без внешних модулей, добавив --external [module name].

browserify -t babelify -x react -x lodash -x three src/app.js > build/bundle.js

(-t babelify, потому что я использовал react / JSX в своем проекте.)

ПРИМЕЧАНИЕ : Вы должны включить module.js в свой html до bundle.js.

Мой bundle.js уменьшен с ~ 92000 до ~ 26000 строк; -)

EDIT : Для создания пакета без внешних модулей (node_modules) вы также можете использовать --no-bundle-external вместо [-x NODE_MODULE_NAME]*.

EDIT # 2 : Когда вы используете в своем проекте модуль, который содержит много подмодулей, -r|-x [MAIN_MODULE_NAME] не потребует | исключать подмодули.

Пример с react-bootstrap:

react-bootstrap содержит много подмодулей, react-bootstrap/lib/[submodule].

browserify -r react-bootstrap > build/modules.js не требует, например, модуль Button (react-bootstrap/lib/Button). Итак ...

... если вы используете

browserify --no-bundle-external src/app.js > build/bundle.js

... вы не сможете использовать Button в своем приложении, потому что --no-bundle-external исключает все модули узлов, включая подмодули. Так что не забудьте потребовать все необходимые подмодули для:

browserify -r react-bootstrap -r react-bootstrap/lib/Button > build/modules.js

ПРИМЕЧАНИЕ : Кроме того, чтобы повысить производительность, вы можете использовать exorcist, чтобы поместить исходную карту в отдельный файл. Установите его с помощью:

npm install --save-dev exorcist

и измените команду browserify:

browserify --no-bundle-external src/app.js | exorcist build/bundle.js.map > build/bundle.js

Спасибо smhg за подсказку с excorcist. И покажи его ответ для более подробной информации.

Answer 4

Используя Chrome 46.x / 47.x в Linux (RHEL 7), ни одно из предложенных решений не помогло мне.Работа состояла в том, чтобы отключить параметр «Использовать аппаратное ускорение, когда оно доступно» в расширенных настройках браузера.

В мониторе / списке процессов я заметил, что средство рендеринга Chromeмного процессора и, как описано выше, даже установка точки останова или пошаговых инструкций в отладчике займет более 10 секунд!

Answer 5

Я добавил его в качестве комментария к ответу marcel , но так как он имел для меня такое большое значение, я думаю, что стоит добавить его как отдельный ответ:

У меня была встроенная исходная карта JS в файле с общим размером около 2-3 МБ (без сжатия, во время разработки).Chrome был невыносимо медленным при загрузке страниц (с открытыми инструментами разработчика).Примерно через 20 секунд, когда файл и встроенная исходная карта будут проанализированы, все станет более или менее нормально.Кроме того, с обновлением до Chrome 43 (в Ubuntu) оно ухудшилось.

Как только я поместил карту источника в отдельный файл , все вернулось на круги своя.Замедление загрузки страницы прошло.Источники доступны мгновенно.

Поскольку я строю с browserify, exorcist был тем, что я использовал.Более конкретно: с watchify в параметре -o, как описано в , эта проблема .

Answer 6

Мое решение состояло в том, чтобы просто удалить пакет проектов, которые выполнялись локально на моем компьютере и были подключены к IIS. Просто удалил папки / проекты, которые я не использую много или больше. удалено 25 ГБ данных, и теперь моя панель инструментов разработчика работает как шарм!

Answer 7

У меня была такая проблема; открытие окна отладчика было медленным (10-20 секунд), а также каждый раз, когда я переступал через код, независимо от того, насколько простым я испытывал большую задержку (10-20 секунд).

Причиной для меня было то, что у меня были несколько больших массивов (1000 записей, 10 МБ данных). Отладчик предварительно отображает все данные в области (включая все глобальные переменные, все, что висит за окном, и все параметры для всех функций в стеке вызовов) для отображения в окне «Переменные области». Если это дерево данных большое, то на каждом шаге отладчику потребуется много времени для пересчета дерева проверки переменных.

Я смог обойти проблему, (а) перемещение большого массива в неглобальную область видимости, чтобы он оставался вне окна, а затем (б) переместить остальную часть моей программы в отдельную область. Вот так:

<script>
(function() {
  // large variable in stack scope, stepping in any
  // code called from here will be slow
  var hugeArray = [...];
  calculateHugeArray(hugeArray);
})();

(function() {
  // large variable now out of scope, so Chrome won't
  // try to display it in the "Scope Variables"
  // window. This makes debugging and stepping faster.
  doMoreThings();
})();
</script>

К сожалению, если вам нужно пройтись по коду, который ссылается на большой массив, то у меня нет обходного пути.

Answer 8

Мой переданный файл, включая исходную карту, составляет около 5 МБ. Я испробовал все решения в этом посте и увидел лишь незначительное улучшение. В конце концов я сдался и удалил и переустановил Chrome. Если бы я сделал это сразу, загрузка исходной карты в отладчике возросла с 15 секунд до 3.

Answer 9

Это исправлено в следующей версии: https://code.google.com/p/chromium/issues/detail?id=485052

Answer 10

Очистка кэша и всех данных о конфиденциальности также решила мою проблему: -)