it-gundan.com

Firebug와 동일한 Google Chrome은 무엇입니까?

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

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

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

32
Mark Hatton

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

17
HoLyVieR
13
Emmett

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

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

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

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

  • Chrome 메뉴 -> 도구 -> 개발자 도구

  • Ctrl + Shift + I Windows에서 또는 Cmd + Shift + I Mac에서

  • F12 Windows에서

  • 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 요소 검사 를 선택하십시오.

5
user9877

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

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

베어 메탈을 얻을 필요가 있다면 Wireshark 는 HTTP를 넘어 완전한 네트워크 트래픽 분석으로 넘어가지만 처음에는 압도적으로 준비해야합니다.

3
JasonBirch

Google의 오픈 소스 Speed ​​Tracer를 사용해 볼 수도 있습니다. http://code.google.com/webtoolkit/speedtracer/

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

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

1
mvark