2011-01-24 7 views
5

파이어 폭스가 싫지만, 웹 개발자로서 파이어 버그가 제공하는 견고한 툴 세트에 묶여있다. 최근 Chrome 및 Safari의 검사 도구를 사용하여 사용자가 전체 청크 구조 코드를 매우 버그가 많은 방식으로 편집 할 수 있었지만 여전히 전체 스타일 시트를 편집 할 수는 없습니다. 일반적으로 누군가가 이것을 가져 오면 크롬과 사파리 개발자는 "하지만 당신은 CSS를 편집 할 수 있습니다."라고 말하면서 어느 정도까지는 사실입니다. 두 브라우저에서 모두 CSS 속성 (변경 사항이 많은 경우 영원히 필요함)을 편집 할 수는 있지만 전체 계산 된 스타일 시트를보고 수정하고 즉시 결과를 볼 수있는 방법은 없습니다. 지금까지 파이어 폭스에서 파이어 버그를 한 번만 설치하면이 작업을 수행 할 수 있습니다.크롬이나 사파리의 온 - 더 - 플라이 (on-the-fly) 스타일 시트 편집

크롬 또는 사파리 캠프에서 이와 유사한 뛰어난 기능과 ​​일치하는 플러그인을 만드는 데 어떤 기세가 있었습니까? 페이지에 CSS를 삽입 할 수있는 저렴한 플러그인은 답이 아닙니다. 정말 간단합니다

  1. 편집하려는 하나를 선택 참조되고있는 현재 스타일 시트 목록을 가지고 있고,
  2. 스타일 시트에있는 모든 코드를 참조 편집 버튼을 클릭
  3. 변경하여 페이지에 즉시 반영되도록하십시오.

이 작업을 수행하는 것이 정말 어려운가요? 나는 두 브라우저의 개발자 공동체가 왜 그것을 완전히 무시할 것인가? 거기에 지금이 기능을 제공하는 뭔가가 있다면, 나는 그것을 듣고 싶습니다. 그렇지 않으면 어쩌면 누군가가 크롬이나 사파리를 위해 판을 밟아 개발할 것입니다. CSS 편집 응용 프로그램을 개발 한 사람들이이 모든 곳에서 일하는 것처럼 보입니다.

+4

'나는 Firefox가 싫어.'-보기 드문 경우. 어떤 특별한 이유? 실제 질문에 관해서는 Firebug의 "실제 CSS 텍스트 변경"기능을 자주 사용하지 않으므로 Chrome에서이 기능을 놓치지 마십시오. "속성 별 속성"변경은 나에게 제 2의 천성에 불과합니다. Chrome/Safari에서 Firebug 기능을 사용하는 것이 좋겠지 만, 대부분의 개발자에게 그렇게 큰 문제는 아니라고 생각합니다. – thirtydot

+0

"보기 드문 경우"- 거의 없습니다. 파이어 폭스와 게코 렌더링 엔진은 특히 나이가 들기 시작했다. 대략 400 명의 전문가 그룹 인 내 팀의 개발자들 사이에서 "새로운 IE"라고 불리는 것은 드문 일이 아닙니다. – bjork24

+2

죄송합니다.하지만 완전히 쓰레기처럼 들립니다. Firefox 3.6.13은 최신 버전이 아니어도 Acid3 테스트에서 90 점을받습니다. 실제로 흥미 롭습니다. 렌더링 엔진의 문제점으로 인해 게시물의 첫 단어가 'Firefox가 싫어'지기에 충분히 싫어하게됩니까? – thirtydot

답변

9

감사합니다. 찾았습니다.

Chrome 용 Live Stylesheets extension이 당신이 찾고있는 제품입니다. 설치 후에 Chrome을 다시 사용하여 사용하십시오.

+0

감사합니다! 그것은 완벽하게 작동합니다! – bjork24

+0

+1, 내가 크롬에서 이것을 원하는 이상한 시간에 완벽한 것 같습니다. – thirtydot

+0

달콤하고 멋진 하나의 @Knu! –

3

Chrome DevTools에서 외부 스타일 시트를 수정할 수도 있습니다 (Chrome 15 이상). Resources 패널에서 스타일 시트 내용을 두 번 클릭하거나 (아래의 "편집"버튼 클릭), 편집하고, Ctrl-S를 눌러 새 개정판을 커밋하고, Esc를 눌러 편집 취소를 취소하십시오. 그리고 입력 할 때 페이지가 업데이트됩니다!

0

확장 프로그램에 의존하지 않고 Chrome에서 직접 CSS 파일을 편집 할 수 있습니다. Edit CSS files on the fly using Chrome DevTools

다른 방법으로는 액세스 할 : 여기

는 어떻게,

  1. 오른쪽 페이지를 클릭 DevTools로에
  2. 검사를 선택, "소스"
  3. 클릭 찾습니다 "네트워크"창에서 CSS를 클릭하고 클릭하십시오.
  4. css를 변경하고 저장하십시오 (Ctrl + S를 눌러). enter image description here