Chrome 개발자 도구의 스타일 패널에서 CSS 변경 사항을 저장하는 방법

Chrome 개발자 도구 의 스타일 패널 에서 CSS 변경 사항을 저장하는 방법은 무엇입니까?

도구 웹 사이트 에서 리소스 패널의 모든 변경 사항을 볼 수 있다고 언급했습니다.

하지만 CSS 파일에서 로컬로 작업하고 있지만 변경 사항이 리소스 패널에 표시되지 않습니다.

그런데 Chrome 개발자 도구의 CSS 변경 사항을 저장하는 도구 인 부가 기능을 알고 있습니까? Firebug에는 https://stackoverflow.com/search?q=firebug+CSS+changes+save 가 많이 있다는 것을 알고 있습니다.

Chrome 개발자 도구 자체에서 CSS 변경 사항을 저장할 수 있습니다. Chrome에서는 이제 작업 공간에 로컬 폴더를 추가 할 수 있습니다. 폴더에 대한 Chrome 액세스를 허용하고 폴더를 로컬 작업 공간에 추가 한 후 웹 자원을 로컬 자원에 맵핑 할 수 있습니다.

• 개발자 도구의 소스 패널로 이동 하고 파일이 나열된 왼쪽 패널을 마우스 오른쪽 단추로 클릭 하고 작업 공간에 폴더 추가를 선택 하십시오 . [요소] 패널에서 선택한 요소에 대해 각 CSS 규칙의 오른쪽 위에있는 스타일 시트를 클릭하면 소스 패널에서 스타일 시트를 빠르게 가져올 수 있습니다.

• 폴더를 추가 한 후에는 폴더에 Chrome 액세스 권한을 부여해야합니다.

• 다음으로 네트워크 리소스를 로컬 리소스에 매핑해야합니다.

• 페이지를 다시로드 한 후 Chrome은 이제 매핑 된 파일에 대한 로컬 리소스를로드합니다. 작업을 단순화하기 위해 Chrome은 로컬 리소스 만 표시하므로 로컬 리소스 나 네트워크 리소스를 편집하고 있는지 혼동하지 않아도됩니다. 변경 사항을 저장하려면 CTRL + S파일을 편집 할 때를 누릅니다 .

추신

Chrome에서 로컬 버전 (201604.12 날짜)을 적용하려면 매핑 된 파일을 열고 편집을 시작해야 할 수 있습니다.

DevTools 테크 라이터 및 개발자 옹호자

Chrome 65부터는 로컬 재정의 가 새롭고 간단한 방법입니다. 이것은 작업 영역과 다른 기능입니다.

재정의 설정

1. 소스 패널로 이동하십시오 .
2. 재정의 탭으로 이동 하십시오.
3. 재정의 할 폴더 선택을 클릭합니다 .
4. 변경 사항을 저장할 디렉토리를 선택하십시오.
5. 뷰포트 상단에서 허용 을 클릭 하여 DevTools에 디렉토리에 대한 읽기 및 쓰기 액세스 권한을 부여하십시오.
6. 변경하십시오. 아래 GIF background:rosybrown에서 페이지로드에 걸쳐 변경 사항이 지속 되는 것을 볼 수 있습니다 .

재정의 작동 방식

DevTools를 변경하면 DevTools가 컴퓨터의 수정 된 파일 사본에 변경 사항을 저장합니다. 페이지를 다시로드하면 DevTools가 네트워크 리소스 대신 수정 된 파일을 제공합니다.

재정의와 작업 공간의 차이점

Workspaces는 DevTools를 IDE로 사용할 수 있도록 설계되었습니다. 소스 맵을 사용하여 리포지토리 코드를 네트워크 코드에 매핑합니다. 실제 이점은 코드를 축소하거나 SCSS와 같이 변환해야하는 코드를 사용하는 경우 DevTools에서 변경 한 내용 (일반적으로)을 원래 소스 코드로 다시 매핑하는 것입니다. 반면에 재정의를 사용하면 웹에서 파일을 수정하고 저장할 수 있습니다. 변경 사항을 빠르게 실험하고 페이지로드시 변경 사항을 저장하려는 경우 좋은 솔루션입니다.

새로운 버전의 Chrome에는이 문제를 해결하는 작업 공간이라는 기능이 있습니다. 웹 서버의 어떤 경로가 시스템의 어떤 경로와 일치하는지 정의한 다음 ctrl-s 만 사용하여 편집하고 저장할 수 있습니다.

참조 : http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

오래된 게시물이라는 것을 알고 있지만 다음과 같이 저장합니다.

1. 소스 분할 창으로 이동하십시오.
2. 네비게이터 표시를 클릭하십시오 (왼쪽에 네비게이터 분할 창을 표시하십시오).
3. 원하는 CSS 파일을 클릭하십시오. (모든 변경 사항이 편집기에서 열립니다.)
4. 편집기를 마우스 오른쪽 단추로 클릭하고 변경 사항을 저장하십시오.

로컬 수정 을보고 개정, 매우 흥미로운 기능을 볼 수도 있습니다. 스크립트로도 작업하십시오.

"자원"의 잘못된 섹션을보고 있습니다.

"Local Storage"아래가 아니라 "Frames"아래에 있습니다 :

위의 스크린 샷은 devtools의 새로운 수정 사항에 대한 독창적 인 스타일의 차이점을 보여줍니다. 왼쪽 창에서 항목을 마우스 오른쪽 버튼으로 클릭하고 디스크에 다시 저장할 수 있습니다.

Tincr Chrome 확장 프로그램은 설치가 더 쉽고 (노드 서버를 실행할 필요가 없음) LiveReload와 같은 기능도 기본 제공됩니다! 양방향 편집에 대해 이야기하십시오! :)

Tin.cr 웹 사이트

크롬 웹 스토어 링크

Andy의 블로그 기사

Chrome 18이 필수 API와 함께 지난주에 출시 되었으므로 Chrome 확장 프로그램 을 Chrome 웹 스토어에 게시했습니다 . 확장 프로그램은 개발자 도구의 CSS 또는 JS 변경 사항을 로컬 디스크에 자동으로 저장합니다. 가서 확인 해봐

참고로, 인라인 스타일을 사용하거나 DOM을 직접 수정하는 경우 (예 : 요소 추가) 작업 공간이이 문제를 해결하지 못합니다. DOM이 메모리에 있고 DOM의 활성 상태와 관련된 실제 파일이 없기 때문입니다.

이를 위해 콘솔에서 돔의 "이전"및 "이후"스냅 샷을 만들고 싶습니다. copy(document.getElementsByTagName('html')[0].outerHTML)

그런 다음 변경 사항을 확인하기 위해 diff 도구에 넣습니다.

전체 기사 : https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

변경 내용을 저장할 수있는 확장명에 대한 질문의 마지막 부분에 핫픽스가 있습니다.

Chrome 개발자 도구의 변경 사항을 GitHub에 직접 저장할 수 있습니다. 여기에서 GitHub에 수신 후 후크를 설정하여 웹 사이트를 자동으로 업데이트 할 수 있습니다.

CSS를 고수하지 않은 한 element.style:

1. 추가 한 스타일로 이동하십시오. inspector-stylesheet라는 링크가 있어야합니다.

2. 그것을 클릭하면 소스 패널에 추가 한 모든 CSS가 열립니다.

3. 복사하여 붙여 넣기-예!

당신 이 사용하는 경우 element.style:

HTML 요소를 마우스 오른쪽 단추로 클릭하고 HTML로 편집을 클릭 한 다음 HTML을 인라인 스타일로 복사하여 붙여 넣을 수 있습니다.

업데이트 2019 : 다른 답변은 약간 구식이므로 여기에 업데이트 된 답변을 추가하겠습니다. 최신 버전에서는 chrome 폴더를 파일 시스템에 매핑 할 필요가 없습니다.

따라서 크롬에서 변경을 할 때 업데이트 할 데스크톱에 HTML, CSS, JS 파일이 포함 된 웹 폴더가 있다고 가정합니다.

1) 노드 등의 실행중인 로컬 서버가 필요합니다. 대신이 vscode 확장 프로그램이 서버를 만듭니다 : 라이브 서버 VSCode 확장 , 설치, 서버 실행.

2) 실행중인 로컬 서버에서 html 페이지를 크롬으로로드하십시오.

3) devTools-> Sources-> Filesystem-> Add folder to workspace를 엽니 다.

4) 로컬 서버 실행에 사용되는 폴더를 추가하십시오. 최신 크롬에는 추가 매핑이 필요하지 않습니다! 타다!

더 거기에 편집 파일로 작업 공간

스타일 탭에서 변경 한 내용은 파일 시스템 파일에 반영되지 않습니다. 대신 devtools-> source-> your_folder로 이동 한 다음 변경 사항을 적용하고 페이지를 다시로드하여 효과를 확인해야합니다.