Chrome 개발자 도구를 사용하여 자바 스크립트 편집

Chrome의 개발자 도구를 사용하여 사이트에서 자바 스크립트를 수정하려고합니다. 나는 이것을하는 방법에 대한 약 30 개의 계정을 읽었고 몇 개의 비디오를 보았습니다. 사실 소스 탭으로 이동하여 편집 할 파일을 열면 아무것도 할 수 없습니다. 내가 놓친 단계가 있습니까?

중단 점을 만들거나 단계를 통과 할 수 있습니다. 편집 할 수 없습니다. 이 기능이 최근에 제거 되었습니까?

이 질문이 부실하다는 것을 알고 있지만 비슷한 문제가 발생하여 해결책을 찾았습니다.

파일을 미리 설정 한 경우 Chrome에서 수정을 허용하지 않습니다. 나는 그것을 끄고 편집 할 수 있었다. 이것이 당신의 문제라고 확신합니다.

"소스"탭의 개발자 도구에서 javascript를 편집 할 수 있지만 자체 파일에서만 javascript를 편집 할 수 있습니다. HTML (또는 PHP) 파일에 포함 된 스크립트는 읽기 전용으로 유지됩니다.

몇 가지 제한 사항이 있습니다.

1. JS 파일이어야합니다. html 페이지에 태그를 삽입 할 수 없습니다.

2. 예쁘게 만들 수 없습니다.

영구적으로 저장하려면 이것이 필요한지 모르겠지만 일시적으로 js를 수정해야하는 경우 :

수정하려는 자바 스크립트를 텍스트 편집기로 복사하고 편집 한 다음 콘솔에 붙여 넣으면 기능이나 재정의해야하는 모든 것을 재정의 할 수 있습니다.

예를 들어 페이지에 다음이있는 경우 :

<script>
var foo = function() { console.log("Hi"); }
</script>

스크립트간에 콘텐츠를 가져 와서 편집 한 다음 다음과 같이 디버거에 입력 할 수 있습니다.

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

그리고 그것은 나를 위해 일할 것입니다.

아니면 좋아한다면

function foo() {
    doAThing();
}

그냥 들어갈 수 있습니다

function foo() {
    doSomethingElse();
}

그리고 foo는 재정의됩니다.

아마도 최선의 해결 방법은 아니지만 작동합니다. 페이지를 다시로드 할 때까지 지속됩니다.

"chrome dev tool edit javascript"를 검색했습니다. 이 페이지는 첫 번째 검색 결과입니다. 하지만 너무 구식이어서 도움이되지 않습니다.

Chrome 73을 사용하고 있습니다.이 버전의 Chrome에는 '로컬 재정의 사용'옵션이 있습니다. 이 기능을 사용하여 자바 스크립트를 편집하고 실행 및 디버그 할 수 있습니다.