실시간 미리보기 및 선택기 현지화 기능이있는 CSS 편집기

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

언급 된 모든 조건이 충족되기를 원하기 때문에 질문을주의 깊게 읽으십시오.

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

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

몇 가지 옵션이 있습니다.

현재 Chrome의 개발자 도구 ( Action Video )를 사용하여 광범위한 검사, 상세보고 및 재정의가 가능합니다. 변경 후 업데이트 된 CSS를 복사하고 CSS 파일의 관련 섹션을 덮어 쓰고 새로 고치고 계속 연결합니다.

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

파일 이름과 줄 번호를 따라 (변경 사항을 복사 한 후) 편집기에 붙여 넣을 수 있습니다.

그 외에도 최근에 WebPutty 라는 도구가 출시 되어 설명 된 문제를 완화하도록 설계되었습니다. 개인적으로 사용하지는 않았지만 Joel Spolsky 의 회사 인 Fog Creek Software (Joel은 StackOverflow의 공동 창립자)가 개발했습니다. 따라서 비교적 안정적이고 간단하며 효과적인 제품입니다.

이 질문은 이미 논의 된 것 같지만 CSS 편집기에 대해 더 구체적으로 이야기하고 있습니다. 그리고 이것이 귀하의 질문이 중복 된 것으로 표시되지 않은 이유입니다.

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

귀하의 질문은 약간 모호한 것 같습니다.

우선 Dreamweaver에 대한 대안과 관련하여 다른 모든 답변에 대한 제안은 훌륭했지만 Dreamweaver에 대한 대안을 찾을 때 가장 가까운 응용 프로그램은 Amaya 프로젝트였습니다. 다른 대안보다 풍부하고 Kompozer보다 조금 더 정교한 것 같습니다.

공식 웹의 스크린 샷은 다음과 같습니다.

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

약간 불안정하거나 적어도 나에게는 적합하지만 귀하의 요구에 맞을 수도 있습니다.

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

그리고 firebug 관련 문제에 대한 제안에 대해서는 말할 수 없습니다. 미안합니다.

아마 야에게 기회를 주면 어떻게했는지 알려주십시오.

행운을 빕니다!

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

나는 당신이 당신의 의견에서 말한 것을 테스트했으며 Amaya는 파일 / 폴더 구조 / 이름에서 변경된 것이 있음을 알지 못했습니다. 이것과 관련된 당신의 요구에 맞지 않을 것입니다.

다음 스크린 샷에서 "resources"폴더의 이름을 "resources1"로 바꾸 었으며 Amaya가 아직 "resources"로 표시하고 있으며 새로 고칠 방법이 없습니다. 소프트웨어를 다시 시작하고 프로젝트를 다시로드 한 후에도 Amaya는이를 인식하지 못합니다.

누군가가 와서 좋은 대안을 제시하기를 희망하면서 귀하의 질문을 밀접하게 따르겠습니다.

행운을 빕니다!

또한 동일한 질문에 대한 다른 사용자의 답변에서 " Blue Griffon Web Editor "는 실시간 미리보기 창을 특징으로하는 유일한 안정적인 웹 편집기 인 것으로 나타났습니다. . 코드 또는 WYSIWYG 미리보기 만 동시에 볼 수는 없습니다.

편의를 위해 여기에 배치 된 스크린 샷 :

미리보기 화면 :

코드 화면 :

이 도구에는 유용한 도구가 많이 포함되어 있지만 일부 애드온 또는 플러그인은 무료 (유료) 일 수 있습니다. 그것은 그것에 대한 매력을 줄입니다.

Aptana에 스튜디오 3 나는이 대답 권하고 : 드림위버와 같은 기본 웹 개발 IDE / 에디터? 듀얼 뷰 확장 데스크탑에서 웹 브라우저를 사용하여 미리보기를 할 수 있으므로 프로그래밍을위한 최고의 도구입니다. 귀하의 경우가 아닐 수도 있습니다.

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

행운을 빕니다!

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

이것 외에도 다른 많은 멋진 기능이 있지만 직접 시도해야합니다. 나는 하나의 사랑에 빠졌다. 여기 스크린 샷이 있습니다 :

미안하지만, 나는 내 자신의 질문에 대답합니다. 방금 Stylebot을 찾았 습니다 . 그것은 내가 가진 거의 모든 조건을 충족시킵니다. 자동 완성 기능은 없지만 그와 함께 살 수 있습니다.

다음은 스크린 샷입니다. 사이드 바는 스타일 봇입니다. 간단한 속성을 빠르게 편집 할 수있는 기본 편집 모드, 선택한 요소의 일반 CSS를 편집 할 수있는 고급 모드 및 "CSS 편집"을 사용하여 페이지의 전체 CSS를 편집 할 수 있습니다.

Firefox 애드온 Firediff를 사용해보십시오 . "변경 사항"탭을 추가하여 Firebug와 통합됩니다.이 탭에는 선 (name) 이름에서 알 수 있듯이 CSS 또는 DOM에 대한 변경 사항이 표시됩니다.

"변경 사항"탭에서 CSS 변경 사항을 마우스 오른쪽 단추로 클릭하여 변경 사항의 차이점 또는 스냅 샷을 저장하십시오.

사용하지는 않았지만 cssUpdater 도 있습니다.

"선택 현지화"에 관해서는, 나는 완전히 당신이 무슨 뜻인지 모르겠지만이 selectBug 다운로드 할 수있는, 여기가 .

Aptana Studio는 훌륭한 IDE이지만 내가 틀리지 않으면 Real-Time Preview가 없습니다. 어쨌든 관심이 있다면 http://www.aptana.com/products/studio3

추신 : 미리보기에 핫키 세트가 있으므로 그렇게 큰 문제는 아닙니다.

소프트웨어 자체는 아니지만 대체 스타일 시트를 저장하면 Stylish Addon (chrome 및 firefox)이 페이지를 자동으로 업데이트합니다. FireBug와 달리 저장하면 .css만족할 때 적절한 파일에 복사하여 붙여 넣을 수 있습니다 .

불과 몇 주 전에이 분야에서 새로운 선수가 생겼습니다. Adobe의 오픈 소스 코드 편집기 브래킷에 대해 이야기하고 있습니다. 필요한 모든 정보는 여기 ( https://github.com/adobe/brackets/wiki/Linux-Version)입니다.

spring30 버전은 며칠 전에 출시되었습니다 :) 행운을 빈다!