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부터는 로컬 재정의 가 새롭고 간단한 방법입니다. 이것은 작업 영역과 다른 기능입니다.
재정의 설정
- 소스 패널로 이동하십시오 .
- 재정의 탭으로 이동 하십시오.
- 재정의 할 폴더 선택을 클릭합니다 .
- 변경 사항을 저장할 디렉토리를 선택하십시오.
- 뷰포트 상단에서 허용 을 클릭 하여 DevTools에 디렉토리에 대한 읽기 및 쓰기 액세스 권한을 부여하십시오.
- 변경하십시오. 아래 GIF
background:rosybrown에서 페이지로드에 걸쳐 변경 사항이 지속 되는 것을 볼 수 있습니다 .
재정의 작동 방식
DevTools를 변경하면 DevTools가 컴퓨터의 수정 된 파일 사본에 변경 사항을 저장합니다. 페이지를 다시로드하면 DevTools가 네트워크 리소스 대신 수정 된 파일을 제공합니다.
재정의와 작업 공간의 차이점
Workspaces는 DevTools를 IDE로 사용할 수 있도록 설계되었습니다. 소스 맵을 사용하여 리포지토리 코드를 네트워크 코드에 매핑합니다. 실제 이점은 코드를 축소하거나 SCSS와 같이 변환해야하는 코드를 사용하는 경우 DevTools에서 변경 한 내용 (일반적으로)을 원래 소스 코드로 다시 매핑하는 것입니다. 반면에 재정의를 사용하면 웹에서 파일을 수정하고 저장할 수 있습니다. 변경 사항을 빠르게 실험하고 페이지로드시 변경 사항을 저장하려는 경우 좋은 솔루션입니다.
답변
새로운 버전의 Chrome에는이 문제를 해결하는 작업 공간이라는 기능이 있습니다. 웹 서버의 어떤 경로가 시스템의 어떤 경로와 일치하는지 정의한 다음 ctrl-s 만 사용하여 편집하고 저장할 수 있습니다.
참조 : http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
답변
오래된 게시물이라는 것을 알고 있지만 다음과 같이 저장합니다.
- 소스 분할 창으로 이동하십시오.
- 네비게이터 표시를 클릭하십시오 (왼쪽에 네비게이터 분할 창을 표시하십시오).
- 원하는 CSS 파일을 클릭하십시오. (모든 변경 사항이 편집기에서 열립니다.)
- 편집기를 마우스 오른쪽 단추로 클릭하고 변경 사항을 저장하십시오.
로컬 수정 을보고 개정, 매우 흥미로운 기능을 볼 수도 있습니다. 스크립트로도 작업하십시오.
답변
“자원”의 잘못된 섹션을보고 있습니다.
“Local Storage”아래가 아니라 “Frames”아래에 있습니다 :
위의 스크린 샷은 devtools의 새로운 수정 사항에 대한 독창적 인 스타일의 차이점을 보여줍니다. 왼쪽 창에서 항목을 마우스 오른쪽 버튼으로 클릭하고 디스크에 다시 저장할 수 있습니다.
답변
Tincr Chrome 확장 프로그램은 설치가 더 쉽고 (노드 서버를 실행할 필요가 없음) LiveReload와 같은 기능도 기본 제공됩니다! 양방향 편집에 대해 이야기하십시오! 🙂
