Firebug는 CSS 편집을 위해 찾은 가장 편리한 도구입니다. 왜 CSS를위한 간단한 "저장"옵션이 없습니까?

나는 항상 Firebug에서 조정을 한 다음 원래 .css 파일로 돌아가서 조정을 복제하고 있습니다.

더 나은 솔루션을 가진 사람이 있습니까?

편집 : 코드가 서버에 저장되어 있음을 알고 있지만 대부분의 경우 내 웹 사이트를 만들 때 사용합니다.

Firebug는 서버에서 다운로드 한 .css 파일 Firefox를 사용하고 있으며 파일을 편집하는 줄을 정확하게 알고 있습니다. 새로운 .css 파일을 저장할 수있는 "내보내기"또는 "저장"옵션이없는 이유를 알 수 없습니다. (그러면 리모컨을 교체 할 수 있습니다).

임시 위치를 찾고 파일 > 저장 ...을 선택하고 Firefox의 출력 옵션을 시험해 보았지만 여전히 방법을 찾지 못했습니다.

편집 2 : 공식 토론 그룹에는 많은 질문 이 있지만 답변은 없습니다.

나는이 기능을 정확하게 찾고, 즉 편집 된 CSS속성을 원래 파일 (로컬 개발 시스템)에 다시 저장할 수 있습니다. 불행히도 많이 검색하고 내 요구에 맞는 것을 찾지 못하면 (OK, CSS 업데이터가 있지만 등록해야하며 유료 확장 프로그램입니다 ...) Firefox + Firebug를 포기하고 Chrome과 비슷한 것을 찾았습니다. 무엇을했는지 ... 방금이 기능을 작동시키는 좋은 방법을 보여주는이 훌륭한 게시물을 찾았습니다 (Chrome에 내장되어 있습니다-추가 확장이 필요 없습니다).

Chrome 개발자 도구를 사용하여 로컬 파일 시스템에서 CSS 및 저장 변경

나는 지금 그것을 시도했고 변경된 줄을 강조하는 것이 효과적입니다. 저장을 클릭하면 완료됩니다. :)

다음은이 훨씬 더 설명하는 비디오의 구글 I / O 2011 : 크롬 개발 도구 리로디드

CSS 파일을 편집하는 동안 브라우저를 변경하는 것이 중요하지 않은 경우 도움이되기를 바랍니다. 지금은 이미 변경했지만 Firebug 에이 기능을 내장하고 싶습니다. :)

[업데이트 1]

오늘 나는이 비디오를 보았습니다 : Sublimetext의 Firefox CSS 라이브 편집 (작업 진행 중) 실제로 유망한 것처럼 보입니다.

[업데이트 2]

Web Essentials 와 함께 Visual Studio 2013 을 사용 하는 경우이 비디오와 같이 CSS를 자동으로 동기화 할 수 있습니다.

웹 기초 : 브라우저 도구 통합

방금 버그가있는 in-the-moment-freestyle-css '가
우연히 다시로드되거나 그 밖의 것들에 의해 날아 갔을 때 , 지금 까지도 꽤 오랫동안 궁금해졌습니다 ....

내 의도와 목적을 위해 마침내 도구를 찾았습니다 .... : FireDiff .

"변경"이라는 새로운 탭, 아마도 이상한 David Bowie 참조를 제공합니다. 어떤 방화범을 보았는지 저장할 수있을
뿐만 아니라 페이지 자체의 변경 사항을 추적 할 수도 있습니다.

그래서 내가 만드는 모든 CSS 규칙 을 다시 입력하거나 다시 상상하고 다시 입력하지 않아도됩니다 .

다음 은 개발자와의 링크입니다 (처음으로 흩어지지 마십시오 . Mozilla Add-On 리포지토리로 바로 넘어갈 수 있습니다) .

웹 개발자 애드온 하자 당신이 당신의 편집 내용을 저장합니다. Firebug 편집 기능과 Web Developer의 저장 기능을 결합하고 싶습니다.

수정 된 CSS를 디스크에 저장 하려면 " 저장 "버튼을 사용하십시오 (CSS 메뉴-> CSS 편집 클릭).

추천 : 다른 탐색을 위해 탭을 변경할 때 변경 사항을 잃지 않도록 하려면 " 스틱 "버튼을 사용하십시오 . 가능한 경우 하나의 탭만 사용하여 관련 검색, 웹 메일 등의 편집 및 기타 파이어 폭스 창을 수행하십시오.

방금 mozilla addon 샌드 박스에서 방화범 애드온 을 출시했습니다 . https://addons.mozilla.org/en/firefox/addon/52365/

실제로 요청시 "터치 된"CSS 파일을 웹 서버에 저장합니다 (단일 파일 웹 서비스 PHP 스크립트와의 통신).

내 홈페이지 또는 애드온 페이지에서 설명서 를 찾을 수 있습니다.

아직 초기 베타 버전이지만 테스트, 버그 보고서, 의견, 평가, 토론에 감사드립니다.

CSS-X- 파이어

나는 이것이 여전히이 질문에 포함되지 않은 것에 놀랐지 만 아마도 새로운 것이기 때문에 저자는 아직 그것을 홍보 할 시간이 없었기 때문이다.

CSS-X-Fire 라고하며 IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine 과 같은 JetBrains IDE 용 플러그인입니다 .

작동 방식 :이 IDE 중 하나를 설치하고 배포를 구성합니다 (FTP 및 SCP 지원). 이를 통해 서버와 동기화 상태를 유지할 수 있습니다.

그런 다음이 플러그인을 설치합니다. 시작되면 Firebug와 IDE를 통합하기 위해 Firefox 용 플러그인을 설치하라는 메시지가 표시됩니다. 플러그인을 설치하지 못하면 드래그 앤 드롭 기술을 사용하여 설치하십시오.

일단 설치되면 Firebug의 모든 변경 사항을 추적하고 IDE 내부에서 간단한 클릭으로 적용 할 수 있습니다.

FireFile

FireFile은 수정 된 CSS를 업로드 할 수 있도록 하나의 작은 PHP 파일을 서버 측에 추가해야하는 대안입니다.

firebugse 를 사용하여 firebug 를 일식에 링크 한 다음 일식에서 파일을 저장할 수 있습니다.

Firebug에서 편집 모드로 이동하여 CSS 파일의 내용을 복사하여 붙여 넣는 것이 가장 가깝습니다.

방금 Firebug 및 Webkit 인스펙터에서 작성된 CSS 변경 사항을 서버에 저장할 수있는 오픈 소스 자바 스크립트 엔진 인 Backfire를 소개했습니다. 라이브러리에는 들어오는 변경 사항을 CSS에 저장하는 방법에 대한 예제 C # 구현이 포함되어 있습니다.

작동 방식에 대한 블로그 게시물은 다음과 같습니다. http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Google 코드에서 호스팅되는 코드는 다음과 같습니다. http://code.google.com/p/backfire/

이것이 귀하의 질문에 대한 답변은 아니지만 놀랍게도 Internet Explorer 8의 Firebug clone "개발자 도구 모음"(F12를 통해 액세스 가능)은 "html 저장"옵션을 제공합니다. 이 함수는 현재 DOM을 로컬 파일에 저장합니다. 즉, 어딘가에 스타일 속성을 추가하여 DOM을 편집하면이 속성도 저장됩니다.

Firebug를 사용하여 모든 사람들처럼 CSS를 망칠 경우 특히 유용하지는 않지만 올바른 방향으로 나아가십시오.

Firebug와 FireFTP의 조합과 웹 사이트를 로컬로 실행할 때 로컬 파일 시스템에 직접 액세스하는 코드를 포함하는 솔루션을 제안합니다.

시나리오는 다음과 같습니다.

원격 컴퓨터에서 호스팅되는 웹 사이트에서 작업

이 경우 FTP 세부 정보를 제공하고 CSS / HTML / Javascript의 위치를 ​​제공하면 Firebug는 변경 사항을 저장할 때 이러한 파일을 업데이트합니다. 파일 자체를 찾은 다음 파일이 올바른지 확인하라는 메시지를 표시 할 수도 있습니다. 파일 이름이 고유 한 경우 문제가되지 않습니다.

로컬 컴퓨터에서 실행되는 웹 사이트에서 작업

이 경우 웹 사이트의 로컬 폴더 위치를 Firebug에 제공 할 수 있으며 파일과 일치하고 확인하는 데 동일한 동작이 사용됩니다. 필요한 경우 FireFTP를 통해 로컬 파일 시스템에 액세스 할 수 있습니다.

FTP 액세스없이 원격으로 호스팅 된 웹 사이트에서 작업

이 경우 FireFile 애드온과 같은 것이 구현되어야합니다.

추가 기능은 FireFTP가 이미 수행 한 것처럼 FTP 세부 정보를 저장할뿐만 아니라 로컬 파일과 연관된 URL 간의 매핑을 저장하는 프로젝트 파일을 저장하고 여는 기능입니다.

Sorin Sbarnea 도이 스레드에 친절하게 게시 한 CSS-X-Fire의 저자입니다. 내가 조금 늦었다 고 생각한다.)

CSS-X-Fire는 Firebug에서 IDE로 CSS 속성 변경 사항을 내보내 변경 사항을 적용하거나 버릴 수 있습니다.

브라우저에서 다운로드 한 파일 이름과 내용에 대해서만 알고있는 기존 도구 대부분에 비해이 솔루션의 장점은 두 가지가 있습니다 (원래 게시물의 NickFitz 주석 참조).

시나리오 1 : 사용자가 선택할 수있는 몇 가지 테마가있는 웹 사이트 (프로젝트)가 있습니다. 각 테마에는 자체 CSS 파일이 있지만 현재 하나 인 Firebug에는 하나만 알려져 있습니다. CSS-X-Fire는 프로젝트에서 일치하는 모든 선택기를 감지하고 수정해야 할 항목을 결정할 수 있습니다.

시나리오 2 : 웹 프로젝트에 스타일 시트가 컴파일 타임 또는 배치 중에 작성되었습니다. 여러 파일에서 병합되어 파일 이름이 변경 될 수 있습니다. CSS-X-Fire는 파일 이름을 신경 쓰지 않고 CSS 선택기 이름과 해당 속성 만 처리합니다.

위는 CSS-X-Fire가 탁월한 시나리오의 예입니다. 소스 파일과 함께 작동하고 언어 구조에 대해 알고 있기 때문에 Firebug, jump-to-code 등으로 알려지지 않은 복제본을 찾는 데 도움이됩니다.

CSS-X-Fire는 Apache 2 라이센스에 따라 오픈 소스입니다. 프로젝트 홈 : http://code.google.com/p/css-x-fire/

FireFile

Firebug는 디버거가 아닌 문제를 감지하기 위해 만들어졌습니다. Firebug를 저장 변경 사항과 통합하는 새 도구를 추가하면 변경 사항을 저장할 수 있습니다. FireFile이므로 http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html을 클릭하십시오 .

FireFile은 서버 측에 작은 PHP 파일을 추가하여 원하는 기능을 제공합니다.

Firebug는 서버에서 작동하지 않지만 사이트에서 CSS를 가져 와서 로컬로 저장하고 로컬 변경 사항이있는 사이트를 표시합니다.

Firefox 웹 개발자 도구 모음에서 CSS 편집기를 사용하십시오.

http://chrispederick.com/work/web-developer/

Firebug와 함께 사용하기에 충분한 좋은 자료가 있으며 CSS를 텍스트 파일로 저장할 수 있습니다.

역화를 사용하십시오.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

CSS 변경 사항을 서버로 다시 전송하여 저장하는 오픈 소스 솔루션입니다.

Backfire는 단일 자바 스크립트 파일을 사용하며 소스 코드 패키지에는 다른 플랫폼으로 쉽게 이식 할 수있는 작동하는 .NET 서버 구현 예제가 있습니다.

나는이 문제도 영원히 가지고 있었고 마침내 웹 관리자에서 물건을 편집해서는 안되며 그것을 위해 무언가를 만들지 않기로 결정했습니다 ( https://github.com/viatropos/design.io ).

더 나은 해결책 :

텍스트 편집기에서 저장을 누르면 브라우저가 다시로드하지 않고 CSS 변경 사항 을 자동으로 반영합니다 .

웹 인스펙터에서 CSS를 편집하는 주된 이유는 (웹킷을 사용하지만 FireBug는 동일한 라인을 따릅니다) 작은 조정이 필요하고 페이지를 다시로드하는 데 너무 오래 걸리기 때문입니다.

이 방법에는 두 가지 주요 문제가 있습니다. 먼저, id선택기가 없는 개별 요소를 편집 할 수 있습니다 . 따라서 웹 검사기에서 생성 된 CSS를 복사 / 붙여 넣을 수 있더라도 CSS id범위를 지정하려면 을 생성해야합니다 . 다음과 같은 것 :

#element-127 {
  background: red;
}

그러면 CSS가 엉망이되기 시작합니다.

기존 선택기 ( .space아래 웹킷 검사기 이미지 의 클래스 선택기)에 대한 스타일 만 변경하면 문제를 해결할 수 있습니다.

그래도 두 번째 문제입니다. 그 인터페이스는 꽤 거칠다.이 CSS 블록을이 곳으로 빠르게 복사하거나 다른 곳으로 복사하려는 경우와 같이 큰 변경을하기가 어렵습니다.

오히려 TextMate를 고수하고 싶습니다.

텍스트 편집기에서 CSS를 작성 하고 페이지를 다시로드하지 않고 변경 사항을 브라우저에 반영하는 것이 이상적입니다 . 이렇게하면 약간의 변경을 할 때 최종 CSS를 작성하게됩니다.

다음 단계는 Stylus, Less, SCSS 등과 같은 동적 CSS 언어로 작성하여 생성 된 CSS로 브라우저를 업데이트하는 것입니다. 이렇게 box-shadow()하면 웹 관리자가 할 수 없었던 복잡성을 제거하는, 같은 믹스 인을 시작할 수 있습니다.

그런 종류의 일이 몇 가지 있지만, 실제로 내 의견으로는 그것을 단순화시키는 것은 없습니다.

• LiveReload : 저장을 누를 때 새로 고침하지 않고 CSS를 브라우저로 푸시하지만 mac 앱 이므로 사용자 정의하기가 어렵습니다.
• CodeKit : Mac 앱이기도하지만 저장할 때마다 브라우저가 새로 고쳐집니다.

이러한 작업 방식을 쉽게 사용자 지정할 수없는 기능이 내가 사용하지 않은 주된 이유입니다.

나는 이 문제를 해결하기 위해 https://github.com/viatropos/design.io를 모아서 만들었습니다.

1. 브라우저는 페이지를 다시로드하지 않고 언제든지 저장할 때 css / js / html / etc를 반영합니다.
2. 모든 템플릿 / 언어 / 프레임 워크 (스타일러스, Less, CoffeeScript, Jade, Haml 등)를 처리 할 수 ​​있습니다.
3. JavaScript로 작성되었으며 JavaScript에서 확장 기능을 실제로 빠르게 채울 수 있습니다.

이런 식으로 CSS를 약간 변경해야 할 때 배경색을 설정하고, 저장을 누르고, nope를 보지 못하고, 색조를 10으로 조정하고, 저장, nope를, 5로 조정하고, 저장하고, 좋아 보인다고 말할 수 있습니다.

작동 방식은 파일을 저장할 때마다 (OS 수준에서), 파일을 처리하고 (확장자가 작동하는 곳) 웹 소켓을 통해 브라우저로 데이터를 푸시 한 다음 처리하는 것입니다 (클라이언트 측). 확장).

플러그를 꽂거나 아무것도하지 않지만 오랫동안이 문제로 어려움을 겪었습니다.

희망이 도움이됩니다.

Firebug는 계산 된 CSS (파일에서 CSS를 가져 와서 상속 등을 적용하여 얻는 것)와 JavaScript로 작성된 변경 사항에 대해 작동합니다. 이것은 아마도 Firefox를 신경 쓰지 않는 한 브라우저 / 버전에 따라 HTML 파일에 포함시키기 위해 직접 사용할 수 없음을 의미합니다. 반면에, 원래의 내용과 계산 된 내용을 추적합니다. JS를 Firebug에 추가하여 해당 CSS를 텍스트 파일로 내보낼 수있는 것은 그리 어렵지 않을 것이라고 생각합니다.

나는 왜 피의 눈을 텍스트로 선택하고 복사 할 수 없는지 궁금했습니다. 특히 다른 사람들이 "선택하고 복사"할 수 있다고 말합니다. 당신이 할 수있는 것으로 밝혀졌습니다 . 클릭 또는 드래그 여부에 관계없이 텍스트에서 즉시 텍스트를 호출하면 텍스트 외부 의 (예 : 텍스트의 위 또는 왼쪽의 제본 용) 드래그를 시작해야 합니다. 편집자. 텍스트 외부를 클릭하여 커서가 표시되는 경우에도 커서를 볼 수 있습니다. 화살표 키로 움직여서 텍스트를 선택할 수 있습니다.
불행히도 클립 보드에 복사 된 텍스트에는 들여 쓰기가 없지만 CSS 파일의 전체 내용을 수동으로 복사하지 않아도됩니다. diff 프로그램이 원본과 비교할 때 공백의 변경 사항을 무시하도록하십시오.

파일 이름 매개 변수와 내용 매개 변수를 사용하는 자체 서버 스크립트 파일을 작성할 수 있습니다.

서버 스크립트는 요청 된 파일을 찾아 내용을 새 파일로 바꿉니다.

Firebug의 정보를 활용하고 유용한 데이터를 검색하는 Javascript를 작성하는 것은 까다로운 부분입니다.

나는 개인적으로 방화 팀의 개발자 팀에게 기능을 제공하도록 요청하고 싶지만 너무 어렵지 않아야합니다.

마지막으로 Ajax는 파일 이름 / 콘텐츠 쌍을 생성 한 PHP 파일로 보냅니다.

Firebug FAQ 에서 인용 :

페이지 편집

• 보고있는 웹 페이지에서 변경 한 내용을 소스에 저장할 수 있습니까?

  지금은 할 수 없습니다. John J. Barton이 뉴스 그룹에 다음과 같이 썼습니다.

  Firebug에서 편집하는 것은 피클을 꺼내서 레스토랑 샌드위치에 겨자를 추가하는 것과 비슷합니다. 결과를 즐길 수 있지만 식당의 다음 고객은 여전히 ​​피클을 받고 겨자는 없습니다.

  이것은 오랫동안 요청 된 기능이므로 언젠가 Firebug에서 직접 사용할 수 있습니다. 한편 Kevin Decker의 Firebug 확장 프로그램 인 Firediff 를 사용해 볼 수 있습니다 .

• Firebug 내에서 사이트 CSS에 대한 모든 변경 사항을 출력하려면 어떻게해야합니까?

  Kevin Decker의 Firediff 에서 구현 된 기능 입니다.

여기 부분적인 해결책이 있습니다. 변경 한 후 관련 파일에 대한 링크 중 하나를 클릭하십시오. 이 파일은 원본 파일이므로 파일을 새로 고침해야합니다. 파일은 Firebug 창의 오른쪽 상단에있는 옵션 메뉴 버튼 아래에 있습니다. 이제 수정 된 CSS 페이지가 있으며이를 복사하여 붙여 넣을 수 있습니다. 분명히, 당신은 각 CSS 파일마다해야합니다.

편집 : Mark Biek 이 더 빠른 버전을 가지고있는 것처럼 보입니다.

페이지를 "편집"하는 가장 쉬운 방법은 인터넷 브라우저를 통해 사이트로 이동하는 것입니다. 데스크탑에 페이지를 html로만 저장하십시오. 바탕 화면으로 가서 새 웹 페이지 파일을 마우스 오른쪽 버튼으로 클릭하고 연결 프로그램을 선택하고 메모장을 선택한 다음 페이지를 편집하십시오. 모든 편집이 완료되면 파일을 저장하고 웹 페이지를 다시여십시오. 올바르게 수행되면 변경 사항이 있어야합니다. 그런 다음 새로 편집 한 페이지를 사용하여 원격 위치로 내보내거나 복사 할 수 있습니다

실제로 Firebug는 디버그 및 분석 도구입니다. 편집기가 아니며 분명히 하나로 간주되지 않습니다. 다른 이유는 이미 언급했습니다. 웹 페이지를 디버깅 할 때 서버에 저장된 CSS를 변경하는 방법은 무엇입니까?