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

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

---

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

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

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

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

---

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

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

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

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

• After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.

p.s.

You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).

---

DevTools tech writer and developer advocate here.

Starting in Chrome 65, Local Overrides is a new, lightweight way to do this. This is a different feature than Workspaces.

Set up Overrides

1. Go to Sources panel.
2. Go to Overrides tab.
3. Click Select Folder For Overrides.
4. Select which directory you want to save your changes to.
5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
6. Make your changes. In the GIF below, you can see that the background:rosybrown change persists across page loads.

How overrides work

When you make a change in DevTools, DevTools saves the change to a modified copy of the file on your computer. When you reload the page, DevTools serves the modified file, rather than the network resource.

The difference between overrides and workspaces

Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.

---

New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.

See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

---

I know it is an old post, but I save it this way :

1. Go to Sources pane.
2. Click Show Navigator (to show the navigator pane on left).
3. Click the CSS file you want. (It will open in the editor, with all changes you made)
4. Right click on editor and Save your changes.

You can also see Local Modifications to see your revisions, very interesting feature. Also work with scripts.

---

You're looking in the wrong section of "Resources".

It's not under "Local Storage", it's under "Frames":

The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.

---

Tincr Chrome extension is easier to install (no need to run node server) AND also comes with LiveReload like functionality out the box! Talk about bi-directional editing! :)

Tin.cr Website

Chrome Web Store Link

Andy's Blog Article

---

Now that Chrome 18 was released last week with the required APIs, I published my chrome extension in the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out.

---

FYI, If you're using inline styles or modifying the DOM directly (for instance adding an element), workspaces don't solve this problem. That's because the DOM is living in memory and there's not an actual file associated with the active state of the DOM.

For that, I like to take a "before" and "after" snapshot of the dom from the console: copy(document.getElementsByTagName('html')[0].outerHTML)

Then I place it in a diff tool to see my changes.

Full article: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

---

To answer the last part of your question about any extensions that can save changes, there is hotfix

It allows you to save changes from Chrome Dev Tools directly to GitHub. From there you can set up a post-receive hook on GitHub to automatically update your website.

---

As long as you haven't been sticking the CSS in element.style:

1. Go to a style you have added. There should be a link saying inspector-stylesheet:

2. Click on that, and it will open up all the CSS that you have added in the sources panel

3. Copy and paste it - yay!

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

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

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