Можно ли с помощью devtools в Chrome перезагрузить только один (или несколько) скриптов или таблиц стилей, введенных в страницу, без перезагрузки всей страницы? Итак, если я нахожусь на page.html который использует script.js и style.css , можно ли перезагрузить, скажем, script.js , не обновляя page.html?
5
2 ответа
0
Я вижу, где это будет полезно при попытке отладки многостраничной формы или чего-то, что загружается 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 для точной интерпретации и отражения всех изменений, которые вы вносите после загрузки страницы.
0
Простой способ работы практически со всеми таблицами стилей и изображениями - это изменить имя файла, добавив запрос к их 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, но изменения, сделанные предыдущим, очень трудно отменить.