Chrome은 Firebug와 동일합니까?

29

다음과 같은 도구를 찾고 있습니다.

HTML 요소 검사
자바 스크립트 관리 / 디버그
프로필 성능
실시간으로 요소 수정

— 에반 플라이스
소스

32

내장되어 있습니다. 페이지 [paper]-> 개발자-> 개발자 도구 (Chrome v5 이하). v6에서는 페이지 버튼이 해당 버전에서 사라져서 다르게 보일 수 있습니다.

— 마크 해턴
소스

3

Google 도구에는 몇 가지 단점이 있습니다. 아약스 요청을 보는 것은 쉽지 않으며, 편리한 여러 줄 모드가 없으며, 창에서 HTML을 편집 할 수 없으며, HTML 트리에 마우스를 올리면 패딩 / 여백을 표시하지 않습니다. 실제 DOM (HTML 트리 만)을 탐색 할 수 없으며 마지막으로 CSS 편집 기능이 복잡하다는 것을 알 수 있습니다. Google에는 자동 완성 기능이 없습니다. 여전히 매우 유용하지만 Firebug가 더 좋습니다.

— cgp

2

또는 게으른 사람을 위해 shift-ctrl-I :)

— Tim Post

1

@ Mark Note, 5.0.375.99를 사용하고 있습니다. 그래도 현재 또는 미래에 차이가 있는지 확실하지 않습니다.

— Evan Plaice

1

v6에서는 렌치-> 도구-> 개발자 도구

— enobrev

17

마우스 오른쪽 버튼 클릭-> 요소 검사

— 홀리 비어
소스

13

구글 크롬 파이어 버그 라이트 .

— 에멧
소스

FireBug Lite는 훌륭한 도구이며 IE, Opera, Safari 및 Firefox에서도 작동합니다. getfirebug.com/firebuglite

— Nat Ryall

5

원래의 질문을받은 지 4 년이 지났습니다. Chrome (안정적)의 버전은 현재 38입니다. 오랫동안 Firefox 용 Firebug와 거의 비슷한 전체 개발자 도구 세트가 포함되어 있습니다 (실수로 Firefox에는 내장 관리자 도 있음).

Chrome 개발자 도구로 할 수있는 몇 가지 :

DOM 검사
CSS 검사
자바 스크립트 콘솔에 액세스
자바 스크립트 디버그
네트워크 요청, 타이밍 및 응답을 봅니다.
렌더링, JavaScript 및 CSS 성능보기
로컬 저장소 및 쿠키 검사

개발 도구는 다양한 방법으로 액세스 할 수 있습니다.

크롬 메뉴 -> 도구 -> 개발자 도구
CtrlWindows에서 + Shift+ I또는 Mac에서 Cmd+ Shift+I
F12 Windows에서
페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택하십시오.

3

브라우저 내 도구는 작업에 훌륭하고 일반적으로 가장 좋은 첫 번째 선택이지만 때로는 HTTP 요청 / 응답 페이로드에 대한 충분한 기술적 세부 정보를 제공하지 않거나 너무 페이지별로 다릅니다.

이 경우 Fiddler 또는 Linux 대안 중 하나 와 같은 전용 HTTP 검사 도구 가 더 많은 통찰력을 제공한다는 것을 알 수 있습니다.

베어 메탈을 실제로 확보해야하는 경우 Wireshark 는 HTTP를 넘어 완전한 네트워크 트래픽 분석을 수행하지만 처음에는 압도적입니다.

— 제이슨 버치
소스

피들러에 익숙하다고 말할 수는 없지만 Wireshark는 과도하게 노출 된 금속입니다. Wireshark는 하위 수준의 프로토콜 세부 정보를 볼 필요가있는 경우에만 유용합니다.

— Evan Plaice

Fiddler는 사용 편의성을 위해 firebug / chrome 개발자 도구에 더 가깝습니다. 내가 찾은 가장 편리한 곳 중 하나는 내 웹 사이트에 KML 파일을 게시 할 때입니다. 웹 브라우저뿐만 아니라 Google 어스와 같은 Windows 데스크톱 응용 프로그램의 요청 및 응답을 볼 수 있습니다. Wireshark를 두 번 사용했지만 일반적으로 일상적인 웹 마스터에 유용하지 않다는 데 동의합니다.

— JasonBirch

1

Google의 오픈 소스 스피드 트레이서 ( http://code.google.com/webtoolkit/speedtracer/)를 사용해 볼 수도 있습니다 .

Speed Tracer는 웹 응용 프로그램의 성능 문제를 식별하고 수정하는 데 유용한 도구입니다. 브라우저 내부의 낮은 수준의 계측 지점에서 가져온 메트릭을 시각화하고 응용 프로그램이 실행될 때이를 분석합니다. Speed Tracer는 Chrome 확장 프로그램으로 제공되며 확장 기능이 현재 지원되는 모든 플랫폼 (Windows 및 Linux)에서 작동합니다.

Speed Tracer를 사용하면 응용 프로그램에서 시간이 소비되는 위치를 더 잘 파악할 수 있습니다. 여기에는 JavaScript 파싱 및 실행, 레이아웃, CSS 스타일 재 계산 및 선택기 일치, DOM 이벤트 처리, 네트워크 리소스로드, 타이머 실행, XMLHttpRequest 콜백, 페인팅 등으로 인한 문제가 포함됩니다.

— mvark
소스