☰

Перезагрузить скрипт/таблицу стилей в Chrome

tag-icon • tag-icon google-chrome
Перезагрузить скрипт/таблицу стилей в Chrome

Используя Chrome's devtools, можно ли перезагрузить только один (или несколько) скриптов или таблиц стилей, внедренных на страницу, не перезагружая всю страницу? Итак, если я использую page.htmlи script.js, style.cssможно ли перезагрузить, скажем, script.js, без обновления page.html?

решение1

Простой способ, который должен работать почти со всемитаблицы стилей и изображенияизменить имя файла, добавив запрос к его URL.

Например, в суперпользователе css будет таким:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

Измените это на

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

И получите обновленный (хотя и тот же) стиль правил.

Это можно сделать закладкой или скопировать в консоль.

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

Что касается сценариев, то вам не следует. Почти всескриптыизменяют страницу при загрузке или прикрепляются к какому-то обработчику. Вы можете легко загрузить другой файл js, но изменения, сделанные предыдущим, очень трудно отменить.

решение2

Я понимаю, где это может быть полезно при попытке отладки многостраничной формы или чего-то, что загружается Ajax в ответ на ряд вопросов; однако я лично видел случаи, когда изменение CSS или скриптов в инструментах разработчика Chrome создавало другой результат, чем когда те же самые изменения добавлялись в соответствующий файл, а страница перезагружалась с нуля. Это происходит не всегда, но я видел это достаточно часто, поэтому я не решаюсь доверять результатам после внесения нескольких изменений в инструментах разработчика.

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

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

Очевидно, создание функции было бы идеальным решением. Возможно, потребуется немного усилий, чтобы настроить это, и вам придется удалить это или иным образом отключить это перед запуском, но это сэкономит время по сравнению с повторной перезагрузкой страницы и необходимостью повторного выполнения длинной цепочки шагов.

Это может быть невозможно, если ваш код значительно сложен (из-за использования внешних библиотек или просто неряшливого кода) или если вам приходится работать на живой системе. Однако, если это возможно, то автоматизация или обход шагов до нужного вам момента позволит вам отлаживать и работать быстрее с более точными результатами, чем полагаться на инструменты разработчика Chrome для точной интерпретации и отражения всех изменений, которые вы вносите после загрузки страницы.

Связанный контент