크롬에서 소스 파일을 직접 편집하는 방법

Tedious 편집에 작별 인사를하는 Chrome 브라우저에서 웹 페이지 소스 코드 편집 - 새로 고침! 이 기사에서는 Chrome Developer 도구를 사용하여 HTML, CSS 및 JavaScript 파일을 직접 편집하고 신속하게 개발하는 방법을 안내합니다.

웹 개발자의 일일 워크 플로우는 일반적으로 다음과 같습니다. 편집기에 HTML, CSS 및 JavaScript 코드를 작성한 다음 브라우저에서 페이지를 열고 문제를 발견 한 후 개발자 도구를 사용하여 코드를 수정 한 후 다시 복사하십시오. 편집자, 페이지를 다시로드하는 것… 핫로드와 같은 도구는 프로세스를 단순화하지만 많은 개발자는 여전히 개발자 도구와 편집자 사이를 전환합니다. 실제로 Chrome을 사용하면 브라우저에서 소스 파일을 직접 열고 편집 할 수 있습니다. 1 단계 : 개발자 도구를 시작하십시오

Chrome을 열고 로컬 파일 시스템 또는 서버에 페이지를로드 한 다음 더 많은 도구 메뉴를 통해 개발자 도구를 열거나 f12

또는 ctrl/cmd 이동

i (운영 체제에 따라 다름). 파일 탐색기를 보려면 소스 탭으로 전환하십시오 :

이보기에서 CSS 및 JavaScript 파일을 직접 열고 편집 할 수는 있지만 페이지를 새로 고침 한 후 이러한 변경 사항이 손실 될 수 있습니다.

2 단계 : 작업 공간 폴더를 연결하십시오

"FilessyStem "탭을 클릭 한 다음"작업 공간에 폴더 추가 "를 클릭하십시오. 작업 폴더를 선택하라는 메시지가 표시되며 Chrome이 폴더에 액세스 할 수 있도록 요청받습니다. Explorer는 시스템에 파일을 표시하면 클릭하여 열 수 있습니다. 3 단계 : 코드를 편집하고 저장 이제 코드를 직접 편집 할 수 있습니다. 구원받지 않은 편집에는 파일 레이블에 별표 (*)가 표시됩니다. CSS 변경 사항이 즉시 업데이트되지만 HTML 및 JavaScript의 경우 파일 시스템에 파일을 저장하고 브라우저를 새로 고침하려면 CTRL/CMD

파일 레이블을 마우스 오른쪽 버튼으로 클릭하고 "Save As ..."를 선택하여 파일의 사본을 다른 위치에 저장할 수도 있습니다.

4 단계 :보기 및 실행 취소 변경

변경 사항을 보려면 파일 레이블을 마우스 오른쪽 단추로 클릭하고 문맥 메뉴에서 "로컬 수정 사항"을 선택하십시오.

는 diff와 유사한 뷰를 표시합니다. 창의 왼쪽 하단에있는 화살표 아이콘은 모든 변경 사항을 취소하고 파일을 원래 상태로 복원합니다.

Chrome의 개발자 도구는 일반적으로 사용되는 코드 편집기를 완전히 대체하지는 않지만 편집기가 설치되지 않은 다른 컴퓨터에서 빠른 변경을 수행하거나 작업 할 때 여전히 매우 유용한 도구입니다.

크롬에 대한 자주 묻는 질문 소스 파일을 직접 편집하기위한 질문

크롬에서 소스 코드를 편집 할 수 있습니까? 예, Chrome의 내장 개발자 도구를 사용하여 웹 페이지의 소스 코드를 직접 편집 할 수 있습니다. 개발자 도구 (F12 또는 CTRL Shift I를 누르면)를 열고 "요소"탭으로 이동하십시오. 편집 할 HTML 요소를 찾고, 마우스 오른쪽 버튼을 클릭하고 편집을 HTML로 선택하거나 코드를 두 번 클릭하십시오. 변경 후 Enter를 눌러 변경 사항을 적용하면 페이지가 즉시 업데이트됩니다. 이러한 변경 사항은 일시적이며 현재 브라우저 세션에만 영향을 미칩니다.

크롬에서 "html로 편집"의 바로 가기 키는 무엇입니까?

Chrome 개발자 도구에서 "HTML로 편집"에 대한 지름길은 없습니다. 그러나 Ctrl Shift C (Mac의 CMD 옵션 C)를 사용하여 "검사"모드를 활성화하고 편집 할 요소를 클릭하여 동일한 기능을 달성 할 수 있습니다. Chrome Developer Tools에서 JS 파일을 편집하는 방법은 ? Chrome Developer Tools에서 소스 탭을 열고 편집하려는 JavaScript 파일을 찾아 오른쪽의 코드 편집기 패널에서 열려면 클릭하여 변경하십시오. 편집이 완료되면 CTRL S (MAC의 CMD S)를 눌러 변경 사항을 저장하십시오. 이러한 변경 사항은 일시적이며 현재 브라우저 세션에만 적용됩니다. 웹 사이트의 JavaScript 파일을 영구적으로 수정하려면 파일 호스팅 서버에 액세스하고 서버에서 직접 편집 할 수 있어야합니다.

위 내용은 크롬에서 소스 파일을 직접 편집하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!