실시간 미리보기 및 선택기 현지화 기능을 갖춘 CSS 편집기

실시간 미리보기 및 선택기 현지화 기능을 갖춘 CSS 편집기

제목은 내가 찾고 있는 것에 대한 모든 것을 말해줍니다. 기본적으로 웹사이트의 모든 스타일을 수집하여 편집하고 저장할 수 있는 소프트웨어여야 합니다.

언급된 모든 조건이 충족되기를 원하므로 질문을 주의 깊게 읽어 보십시오.

편집하다:여기서는 좀 더 명확하게 설명하거나 원하는 작업 흐름을 설명하고 싶습니다. 시작 상황은 로컬 컴퓨터에 웹사이트 소스가 있다는 것입니다.
이제 내 편집기/IDE/무엇이든(WYSIWYG 없음!) 일반 소스(HTML/CSS)를 열고 싶습니다. 그리고 바로 옆이나 다른 창(다른 탭이 아님!)에서 실시간 미리보기를 원하고, 소스를 편집하면서 보고 싶습니다. 미리보기는 자동으로 업데이트되어야 합니다(또는 CTRL+S가 반사적으로 작동하기 때문에 본질적으로 동일할 파일을 저장할 때 :P).
또한 Firebug 또는 Chrom(e|ium)에서와 같이 작동하는 검사기가 있어야 합니다. 해당 검사기에서 CSS 선택기를 클릭하면 커서가 해당 소스 파일의 해당 선택기로 바로 이동해야 합니다.

또 다른 편집:이것을 찾았습니다https://stackoverflow.com/q/4680109/220652. 거의 같은 문제입니다.

답변1

몇 가지 옵션이 있습니다.

현재 나는 단순히Google 크롬의 개발자 도구(액션 비디오) 광범위한 검사, 세부 보고 및 재정의가 가능하기 때문입니다. 변경한 후에는 업데이트된 CSS를 복사하고 CSS 파일의 관련 섹션을 덮어쓴 다음 새로 고치고 계속해서 연결합니다.

여기에서는 Chrome 개발자 도구의 정의를 편집했습니다.

여기에 이미지 설명을 입력하세요

변경 사항을 복사한 후 파일 이름과 줄 번호를 따라가서 편집기에 붙여넣으면 됩니다.

여기에 이미지 설명을 입력하세요

그 외에도 최근에 출시된 도구가 있습니다.웹퍼티설명된 문제를 완화하도록 설계되었습니다. 아직 개인적으로 사용해본 적은 없지만조엘 스폴스키님의 회사포그 크릭 소프트웨어(Joel은 StackOverflow의 공동 창립자이기도 합니다.) 따라서 저는 이 제품이 상대적으로 안정적이고 간단하며 효과적인 제품이라고 확신합니다.

답변2

이 질문은 이미 논의된 것 같지만 CSS 편집기에 대해 더 구체적으로 이야기하고 있습니다. 그래서 그들이 귀하의 질문을 중복된 것으로 표시하지 않은 이유라고 확신합니다.

그러나 제가 제안할 수 있는 것은 다른 질문에 대한 답변으로 게시한 다음과 같은 여러 도구의 사용법입니다.우분투의 Dreamweaver 대안?, 그리고 이미 보셨을 것이라 확신하더라도 귀하의 편의를 위해 여기에 내용을 기록합니다.

귀하의 질문이 조금 모호한 것 같습니다.

우선 Dreamweaver의 대안과 관련하여 다른 모든 답변의 제안이 훌륭하다고 생각했지만 Dreamweaver의 대안을 찾을 때 나에게 가장 가까운 애플리케이션은 바로아마야프로젝트. 다른 대안보다 가장 풍부하고 Kompozer보다 조금 더 정교한 것 같습니다.

공식 웹의 스크린샷은 여기에서 실제 작동 모습을 확인할 수 있습니다.

여기에 이미지 설명을 입력하세요

다음 링크를 클릭하면 추가 스크린샷을 볼 수 있습니다. http://www.w3.org/Amaya/screenshots/Overview.html

당신은 그것이 약간 불안정하다고 생각할 수도 있고, 적어도 나에게는 그랬지만 당신의 요구에 맞을 수도 있습니다.

WYSIWYG 편집기를 사용해본 후 BlueFish를 사용한 직접 인코딩을 선호했지만 WYSIWYG 편집기는 아닙니다.

그리고 방화범 문제에 대한 제안에 대해서는 아무 말도 할 수 없습니다. 죄송합니다.

Amaya에게 기회를 주신다면 어떻게 했는지 알려주시기 바랍니다.

행운을 빌어요!

편집 == Amaya를 설치한 후 아직 안정적이지는 않지만 다른 소프트웨어는 단순한 텍스트 편집기이고 Amaya는 WYSIWYG 편집기와 같다고 생각하면 다른 응용 프로그램보다 더 나은 기능을 가지고 있는 것 같습니다.

귀하의 의견에서 귀하가 말씀하신 내용을 테스트한 결과 Amaya는 파일/폴더 구조/이름에서 변경된 사항을 알아차리지도 못하는 것으로 나타났습니다. 이와 관련된 귀하의 요구에 맞지 않습니다.

다음 스크린샷에서는 "resources" 폴더의 이름을 "resources1"로 변경했는데 Amaya가 아직 "resources"로 표시하고 있으며 강제로 새로 고칠 수 있는 방법이 없음을 볼 수 있습니다. 소프트웨어를 다시 시작하고 프로젝트를 다시 로드한 후에도 Amaya는 이를 알아차리지 못합니다.

여기에 이미지 설명을 입력하세요

누군가가 와서 좋은 대안을 제시해주기를 바라면서 귀하의 질문을 면밀히 따를 것입니다.

행운을 빌어요!

또한 동일한 질문에 대한 다른 사용자의 답변에서 "블루 그리폰 웹 에디터" 실시간 미리보기 창을 갖춘 유일한 안정적인 웹 편집기인 것 같습니다. 분할 모드에서는 -btw-를 볼 수 없습니다. 코드나 WYSIWYG 미리보기만 볼 수 있으며 동시에 둘 다 볼 수는 없습니다.

귀하의 편의를 위해 여기에 스크린샷을 배치했습니다:

미리보기 화면: 여기에 이미지 설명을 입력하세요

코드 화면: 여기에 이미지 설명을 입력하세요

이 도구에는 유용한 도구가 많이 포함되어 있지만 일부 추가 기능이나 플러그인은 무료(유료)가 아닐 수 있습니다. 그것에 대한 매력이 줄어 듭니다.

그만큼앱타나 스튜디오 3, 이 답변에서 추천합니다.Dreamweaver와 같은 기본 웹 개발 IDE/편집기?듀얼 뷰 확장 데스크탑에서 웹 브라우저를 사용하여 실시간으로 미리 볼 수 있기 때문에 나에게는 프로그래밍을 위한 최고의 도구입니다. 귀하의 경우가 아닐 수도 있습니다.

그것이 제가 제안할 수 있는 것입니다. 이것이 귀하의 요구에 맞지 않는다면 죄송합니다.

행운을 빌어요!

답변3

좋아, 다들 들어봐!지니정말 대단해요! 브라우저 미리보기를 추가하는 플러그인이 있습니다. 사이드바, "하단바" 또는 추가 창에 배치할 수 있습니다. 그리고 지금은추가 보너스 나쁜 엉덩이 킬러 기능.1.이 브라우저는 WebKit을 사용합니다. 즉, 이 멋진 검사관이 있다는 뜻입니다!2.열려 있는 문서를 저장하면 브라우저가 다시 로드됩니다.

이 외에도 다른 멋진 기능이 많이 있지만 직접 사용해 보시기 바랍니다. 나는 방금 사랑에 빠졌습니다. 여기에 스크린샷이 있습니다.

지니

답변4

Firefox 애드온을 사용해 보세요파이어디프. 이는 zen과 같은 이름에서 알 수 있듯이 CSS 또는 DOM에 대한 모든 변경 사항을 표시하는 "변경 사항" 탭을 추가하는 Firebug와 통합됩니다.

변경 사항의 차이점이나 스냅샷을 저장하려면 "변경 사항" 탭에서 CSS 변경 사항을 마우스 오른쪽 버튼으로 클릭하세요.

해고 스크린샷

도 있습니다CSS업데이터, 하지만 나는 그것을 사용하지 않았습니다.

"선택기 현지화"에 관해서는 무슨 뜻인지 잘 모르겠지만selectBug, 다운로드할 수 있습니다.여기.

관련 정보