☰

Chrome에서 스크립트/스타일시트 다시 로드

tag-icon • tag-icon google-chrome
Chrome에서 스크립트/스타일시트 다시 로드

Chrome의 개발자 도구를 사용하면 전체 페이지를 다시 로드하지 않고 페이지에 삽입된 스크립트 또는 스타일시트 중 하나(또는 그 이상)만 다시 로드할 수 있습니까? 그렇다면 내가 and 를 page.html사용 하고 있다면 새로 고치지 않고 다시 로드할 수 있습니까 ?script.jsstyle.cssscript.jspage.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에 의해 로드된 항목을 디버깅하려고 할 때 이것이 유용할 수 있다는 것을 알 수 있습니다. 그러나 저는 개인적으로 Chrome 개발 도구에서 CSS나 스크립트를 수정하면 동일한 변경 사항이 적절한 파일에 추가되고 페이지가 처음부터 다시 로드될 때와 다른 결과가 생성되는 경우를 보았습니다. 항상 그런 것은 아니지만, 개발 도구에서 여러 번 변경한 후 결과를 신뢰하는 것이 주저될 만큼 충분히 그런 일이 발생하는 것을 보았습니다.

왜 이 작업을 수행하려는지는 잘 모르겠지만, 이것이 일부 긴 체인 프로세스를 디버깅하기 위한 것이라고 가정하면 디버깅 중인지 확인하기 위한 간단한 테스트를 추가하는 것이 좋습니다. 코드 설정 방법에 따라 다음 대략적인 예와 같이 작동하는 디버그 지점을 추가하려고 합니다.

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의 개발 도구에 의존하는 것보다 더 정확한 결과로 디버깅하고 더 빠르게 작업할 수 있습니다.

관련 정보