웹 UI 디자인을 배우고 싶습니다. (나는 프로그래머가되어 불이익을 당하고 있지만 어쨌든 시도하고 싶다.) 따라서 CSS 파일을 "디버그"하고 싶다.브라우저 확장을 사용하여 페이지 자체를 다시로드하지 않고도 CSS 파일의 업데이트 된 버전을 사용하여 페이지를 다시 렌더링합니다.
내가 발견 한 가장 큰 골칫거리 중 하나는 전체 페이지를 다시로드하지 않고 CSS 파일의 변경 사항을 테스트 할 수 없다는 점입니다. 때때로 페이지가 너무 큽니다. 내 페이지가 AJAX에 너무 많이 의존하기 때문에 때로는 많은 요소가 많은 클릭 후 페이지로 이동되었습니다. 가끔 Command + R을 항상 때리는 것이 싫어.
전체 페이지 자체를 다시로드하지 않고도 CSS 파일의 업데이트 된 버전을 사용하여 페이지를 다시 렌더링하는 주요 브라우저 (Safari 및/또는 Chrome이 좋음)를위한 확장 프로그램이 있습니까?
Chrome의 개발자 도구를 사용하여 CSS 정의를 편집 할 수 있습니다. 스타일 시트 만 다시로드 할 수있는 확장 기능을 알 수는 없지만 몇 가지 변경 사항 만 테스트하려는 경우이 기능이 도움이 될 수 있습니다. Firebug for Firefox는 동일한 작업을 허용합니다.
Firefox "Web Developer"플러그인을 사용하면 해당 메뉴에서 "사용자 스타일 시트 추가 ..."를 수행 할 수 있습니다. 또한 css 파일의 내용을 실시간으로 편집 할 수있는 "CSS 편집"기능이 있습니다 (예 : file1.css 및 file2.css에는 각 파일 당 하나씩 두 개의 편집기 탭이 있음). 편집 된 파일을 저장할 수 있습니다.
나는 Paul이 제안한 것처럼 Firebug를 더 자주 사용하는 경향이 있으며, 변경된 CSS 파일 콘텐츠를 복사하여 실제 CSS 파일에 다시 붙여 넣을 수 있습니다.
Stylebot 크롬 용 확장 프로그램도 좋습니다.
변경 사항을 신속하게 편집하고 볼 수 있습니다. 실제로 웹 사이트의 기본 스타일 시트에 대해 수정 한 내용으로 편집 된 디스플레이가있는 목록에 저장할 수있는 사이트를 개인적으로 볼 수 있도록 저장할 수 있습니다.
스타일 봇은 사용자 정의 CSS를 사용하여 모든 웹 사이트의 모양을 신속하게 조작 할 수있게 해줍니다. Stylebot을 사용하면 즐겨 찾는 웹 사이트의 모양과 느낌을 개인 설정할 수 있습니다. CSS를 배우고 자신의 사이트 디자인을 디버깅하는 훌륭한 도구이기도합니다.