Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까?

Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까?

Google Chrome Developer Tools의 Styles 패널의 CSS 변경 사항을 저장하는 방법은 무엇입니까?

도구의 웹 사이트에서 리소스 패널의 모든 변경 사항을 확인할 수 있다고 합니다.

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

그런데 크롬 개발자 도구의 CSS 변경 사항을 저장할 수 있는 추가 기능, 도구를 알고 있습니까?Firebug에는 많은 https://stackoverflow.com/search?q=firebug+CSS+changes+save 이 있다는 것을 알고 있습니다.

Chrome Dev Tools 자체에서 CSS 변경 사항을 저장할 수 있습니다.이제 Chrome을 사용하여 작업영역에 로컬 폴더를 추가할 수 있습니다.폴더에 대한 Chrome 액세스를 허용하고 폴더를 로컬 작업 공간에 추가한 후 웹 리소스를 로컬 리소스에 매핑할 수 있습니다.

• Developer Tools의 Sources 패널로 이동하고 왼쪽 패널(파일이 나열됨)에서 마우스 오른쪽 버튼을 클릭한 다음 Add Folder to Workspace를 선택합니다.요소 패널에서 선택한 요소에 대해 각 CSS 규칙의 오른쪽 상단에 있는 스타일시트를 클릭하면 소스 패널의 스타일시트에 빠르게 액세스할 수 있습니다.

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

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

• 페이지를 다시 로드한 후 Chrome은 매핑된 파일에 대한 로컬 리소스를 로드합니다.이를 쉽게 하기 위해 Chrome은 로컬 리소스만 표시합니다. 따라서 로컬 리소스를 편집하는지 네트워크 리소스를 편집하는지 혼동하지 않습니다.변경 내용을 저장하려면 다음을 누릅니다.CTRL + S파일을 편집할 때 사용합니다.

추신.

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

DevTools 기술 작성자이자 개발자 옹호자입니다.

Chrome 65부터 시작된 로컬 오버라이드는 이를 위한 새롭고 가벼운 방법입니다.이것은 Workspaces와는 다른 기능입니다.

재정의 설정

1. 소스 패널로 이동합니다.
2. 재정의 탭으로 이동합니다.
3. 재정의할 폴더 선택을 클릭합니다.
4. 변경사항을 저장할 디렉토리를 선택합니다.
5. 보기 포트의 맨 위에서 허용을 클릭하여 DevTools에서 디렉토리에 대한 읽기 및 쓰기 액세스 권한을 부여합니다.
6. 변니다합. ▁에▁you▁▁see▁can,▁in▁below수▁the볼▁gif다변경니아.background:rosybrown페이지 로드에 걸쳐 변경 사항이 유지됩니다.

재정의 작동 방식

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

재지정과 작업공간의 차이

워크스페이스는 DevTools를 IDE로 사용할 수 있도록 설계되었습니다.소스 맵을 사용하여 저장소 코드를 네트워크 코드에 매핑합니다.실제 이점은 코드를 축소하거나 SCSS와 같이 변환해야 하는 코드를 사용하는 경우 DevTools에서 변경한 내용이 원래 소스 코드에 다시 매핑된다는 것입니다.그러나 웹에서 파일을 수정하고 저장할 수 있습니다.변경사항을 신속하게 실험하고 페이지 로드 전체에 걸쳐 변경사항을 저장하려면 이 방법이 좋습니다.

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

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

오래된 게시물인 것은 알지만 다음과 같이 저장합니다.

1. [소스] 영역으로 이동합니다.
2. 왼쪽에 네비게이터 영역을 표시하려면 [ 네비게이터 표시]를 누릅니다.
3. 원하는 CSS 파일을 클릭합니다. (편집기에서 모든 변경사항과 함께 열립니다.)
4. 편집기를 마우스 오른쪽 단추로 클릭하고 변경 내용을 저장합니다.

또한 로컬 수정을 통해 매우 흥미로운 기능을 볼 수 있습니다.스크립트 작업도 수행합니다.

당신은 "리소스" 섹션을 잘못 보고 있습니다.

"로컬 스토리지"가 아니라 "프레임" 아래에 있습니다.

위 스크린샷은 개발 도구에서 변경된 새로운 수정 사항에 대한 원본 스타일의 차이를 보여줍니다.왼쪽 창에서 항목을 마우스 오른쪽 버튼으로 누르고 다시 Disk에 저장할 수 있습니다.

Tincr Chrome 확장 기능은 설치하기 쉽고(노드 서버를 실행할 필요가 없음), 즉시 사용할 수 있는 LiveReload 기능도 제공됩니다!양방향 편집에 대해 말해보세요! :)

Tin.cr 웹사이트

크롬 웹 스토어 링크

앤디의 블로그 기사

지난주에 필요한 API가 포함된 Chrome 18이 출시되었기 때문에, 저는 Chrome 웹 스토어에 저의 Chrome 확장자를 게시했습니다.확장은 자동으로 개발자 도구의 CSS 또는 JS 변경 사항을 로컬 디스크에 저장합니다.가서 그것을 구경해 보세요.

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

따라서 바탕 화면에 HTML, CSS, JS 파일이 들어 있는 웹 폴더가 있다고 가정하면 크롬을 변경할 때 업데이트할 수 있습니다. =

노드 등과 같은 실행 중인 로컬 서버가 필요합니다. 또는 이 vscode 확장을 통해 라이브 서버 VScode 확장을 설치하고 서버를 실행할 수 있습니다.

실행 중인 로컬 서버에서 크롬으로 html 페이지를 로드합니다.

devTools->소스->파일 시스템->작업영역에 폴더 추가

로컬 서버를 실행하는 데 사용되는 폴더를 추가합니다.최신 크롬에서는 추가 매핑이 필요하지 않습니다!짜잔!

작업영역이 있는 파일 편집에 대한 자세한 정보

스타일 탭에서 변경한 내용은 파일 시스템 파일에 반영되지 않습니다.

대신 devtools->source->your_folder로 이동한 후 변경하고 페이지를 다시 로드해야 효과를 확인할 수 있습니다.

당신이 CSS를 꽂지 않는 한.element.style:

1. 추가한 스타일로 이동합니다.검사자 스타일시트라고 적힌 링크가 있어야 합니다.

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

3. 복사해서 붙여넣기 - 야!

사용 중인 경우element.style:

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

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

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

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

전체 기사: https://medium.com/ @therrocob/get-code out-of-devolutes-and-in-to-your-devaf5651b4a

변경 사항을 저장할 수 있는 확장에 대한 질문의 마지막 부분에 답하려면 핫픽스가 있습니다.

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

언급URL : https://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools