Chrome 용 Firebug와 유사한 디버거 소스 검사 (요소 선택,

Chrome에서 사용할 수있는 Firebug와 같은 것이 있습니까?

내가 원하는 기본 기능 :

  • HTML 소스 검사 (요소 선택, 삭제 등)
  • CSS 값을 확인하십시오 (내장 솔루션은 이상합니다)


답변

Chrome에는 이미 Firebug와 같은 도구가 내장되어 있습니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 “요소 검사”를 선택하십시오. Chrome에는 디버깅을위한 그래픽 도구 (Firebug와 같은)가 있으므로 JavaScript를 디버깅 할 수 있습니다. 또한 CSS 검사를 잘 수행하고 CSS 렌더링을 즉시 변경할 수도 있습니다.

자세한 내용은 https://developers.google.com/chrome-developer-tools/를 참조 하십시오.


답변

Firebug Lite는 HTML 요소, 계산 된 CSS 스타일 등을 검사 할 수 있도록 지원합니다. 순수한 JavaScript이기 때문에 다양한 브라우저에서 작동합니다. 소스에 스크립트를 포함 시키거나 한 번의 클릭으로 모든 페이지에 포함 시키려면 책갈피 표시 줄에 책갈피를 추가하십시오.

http://getfirebug.com/lite.html


답변

Firebug / Chrome Inspector를 매일 사용하는 사람으로서 몇 가지 이야기를 추가하면 됩니다.

  1. 글을 쓰는 시점에는 Google DOM 관리자 만 있으며 Firebug의 모든 기능을 갖추고 있지는 않습니다.

  2. 인스펙터는 파이어 버그의 ‘라이트’버전입니다. 인터페이스는 좋은 IMO가 아니며, 두 최신 버전의 요소 검사는 이제 어수선하지만 파이어 버그는 여전히 낫습니다. 더 나은 브라우저 경험을 제공하기 때문에 Chrome에 대한 사랑을 찾으려고 노력하고 있지만 개발 작업을 위해서는 여전히 짜증이납니다.

  3. Firebug에서 DOM / CSS의 실시간 미리보기 / 수정은 여전히 ​​낫습니다. 계산 된 CSS 및 상자 모델보기가 Firebug에서 더 좋습니다.

  4. 어쨌든 여러 주요 영역에서 문서를 탐색, 조작 / 수정하기 쉽기 때문에 Firebug를 읽고 사용하는 것이 더 쉬울까요? 누가 알아. 나는 인터페이스에 익숙하고 이것이 내가 인정하는 주관적인 일이지만 Chrome Inspector가 좋지 않다고 생각합니다.

  5. 쿠키 / 넷 탭은 Firebug에서 매우 유용합니다. 아마도 Chrome Inspector에이 기능이 있습니까? 마지막으로 확인하지 않았습니다 .Chrome은 사용자 개입없이 백그라운드에서 자체 업데이트하므로 모든 훌륭한 대 군주와 마찬가지로 기본적으로 동의합니다.

  6. 마지막 요점 : Chrome이 모든 기능을 갖춘 Firebug를 얻는 날은 Firefox가 WebKit 만큼 빠른 속도로 Firefox의 레이아웃 엔진 Gecko 를 만들어야했기 때문에 Firefox가 기본적으로 개발자를 위해 죽는 날 입니다. 너무 둔하게해서 미안하지만 진실입니다.

이제 모든 사람이 모바일 접근성 및 대화 형 기능 (iPhone, iPad, Android)에 동기를 부여한 jQuery 대신 Flash에서 멀어 지길 원하고 JavaScript는 ‘갑자기'(비정품)이므로 배가 항해했습니다. Firefox. 모질라 팬으로서 저를 슬프게합니다. Firefox가 JavaScript 엔진을 업그레이드 할 때까지 Chrome은 더 나은 브라우저입니다.


답변

F12

나는 단축키를 좋아한다


답변

Firebug Lite 라고 하며 Chrome 베타 버전에서 작동합니다.

https://chrome.google.com/extensions/ 에서 찾을 수 있습니다.


답변

Chrome / Chromium 브라우저에서 Firebug lite를 항상 사용할 수 있도록 ‘북마크 바’에서이 북마크를 설정할 수 있습니다 (URL로 입력).

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);


답변

또는 사용자 스크립트를 사용해보십시오 : http://dev.chromium.org/developers/design-documents/user-scripts