Chrome 용 Firebug와 유사한 디버거

278

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

내가 원하는 기본 기능 :

  • HTML 소스 검사 (요소 선택, 삭제 등)
  • CSS 값을 확인하십시오 (내장 솔루션은 이상합니다)
html  css  google-chrome  debugging  firebug 
— 세바스찬 호 이츠
소스
9
Chrome에서 확장 프로그램을 지원하는 것처럼 보니 기존 답변이 기술적으로 잘못되었으므로 다시 방문 할 수 있습니다. 새로운 답변을 시작하는 대신이 답변을 업데이트해야합니다.
— Nathan Koop
3
@Nathan Koop : 틀릴 수는 있지만 Chrome 확장 시스템이 Firebug와 같은 것을 허용 할만 큼 강력하지 않다고 생각합니다.
— Sasha Chedygov
1
브라우저에서 파이어 버그를 얻으려면이 링크를 확인하십시오. getfirebug.com/releases/lite/chrome
— Techie

답변:

243

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

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

— 드미트리 토르 바
소스
19
++ 이것은 Chrome 관련 문제를 해결하기에 충분합니다. 더 깊이 들여다보고 싶다면 Firebug로 할 수 있습니다. 이제 IE8의 새로운 개발자 모드에서는 모든 주요 브라우저에 내장 개발 모드가 있습니다. 좋은 시간.
— 총
1
아, 그것을 찾기 위해 조금 걸렸지 만 firebug의 html 편집 기능도 있습니다 .CSS, 개발자 툴바를 편집하고 요소를 두 번 클릭하고 유형을 입력하고 Enter 키를 누르면 같은 위치에 있습니다. 당신은 html 편집했습니다.
— Kzqai
4
Chrome 개발자 도구 (ctrl + shift + j)는 Firebug와 같은 자바 스크립트 디버깅을 지원합니다. 스크립트 탭을 클릭 한 다음 "Show console"이라는 툴팁이있는 맨 아래 (> =)의 두 번째 아이콘을 클릭하십시오. 거기에서 Firebug 콘솔과 같은 Javascript 명령을 실행할 수 있습니다.
— Pierre-Antoine LaFayette
1
일부 Linux 기반 시스템에서는 자동으로 설치되지 않으므로 수동으로 설치해야합니다. sudo apt-get install chromium-browser-inspector
— Manuel
1
현재 개발 빌드 4.0.xxxx에는 일련의 개발자 도구가 있습니다. 검사 요소에 대해서는 알고 있었지만 "Net"패널이 없으면 충분하지 않았습니다. 그러나 이제는 "리소스"패널이 있습니다.이 패널은 꽤 잘 작동하는 것으로 보이고 방화범 (스크립트, xhr, 이미지 등)과 동일한 필터를 가지고 있습니다. 나는 일주일 동안 Dev 빌드를 사용해 왔으며 꽤 안정적으로 보입니다. 방금 기본 브라우저를 크롬으로 설정했습니다. 이제 개발자 브라우저이기도합니다! :)
— Mark J Miller
37

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

http://getfirebug.com/lite.html

— 집단
소스
훌륭한 링크! IE 버전에 대해 알고하지 않았나요
— 패트릭 Desjardins에에게
15

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은 더 나은 브라우저입니다.

— 중성자
소스
Firefox가 내리막 길입니다. 현재 (2013) chrome devtools는 firebug보다 훨씬 강력합니다 ... 파이어 폭스는 모두 안드로이드 frodo에 가깝지 않은 Firefox OS에 노력을 집중하고 있습니다. 빨리.
— Phyo Arkar Lwin
9

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);
— 마누엘
소스
4

jQuerify 는 jQuery를 Chrome 콘솔에 내장 할 수있는 완벽한 확장이며 상상할 수있는 것처럼 간단합니다. 이 확장은 또한 jQuery가 이미 페이지에 임베드되었는지 여부를 나타냅니다.

이 확장은 jQuery를 원하는 페이지에 포함시키는 데 사용됩니다. 콘솔 셸에서 jQuery를 사용할 수 있습니다 ( Ctrl+ Shift+ j"로 Chrome 콘솔을 호출 할 수 있습니다 .").

선택한 탭에 jQuery를 포함하려면 확장 버튼을 클릭하십시오.

— 안드레이
소스
4

공식 Firebug Chrome 확장 프로그램 또는 확장 프로그램을 직접 다운로드하여 패키징 할 수 있습니다.

https://getfirebug.com/releases/lite/chrome/

— joshatjben
소스
2
명확성을 위해 : 이것은 firebug 확장이 아닌 firebug lite 확장에 대한 링크입니다.
— NeuroScr
이전에 제공된 링크가 끊어졌습니다. 이 링크를 새 링크로 업데이트하십시오.
— Rob Hruska
3

글쎄, 구글 크롬에 Greasemonkey 스크립트 를 활성화 할 수 있으므로이 방법을 사용하여 Firebug를 설치하는 방법이 있습니까? Firebug Lite 도 작동하지만 전체 기능을 사용하는 것과 같은 느낌은 아닙니다.

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

— 피터 모텐슨
소스
3

F12 (Linux 및 Windows에서만)

또는

Ctrl ⇧ I

( ⌥ ⌘ IMac 인 경우)

— 시아 노네
소스
1

야간 ppa를 사용하여 Ubuntu에서 Chromium을 사용하는 경우 chromium-browser-inspector

— 로리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.