Chrome의 개발자 도구에는없는 Firebug에는 어떤 기능이 있나요? [닫은]

저는 초보 웹 개발자이며 디버깅을 위해 Firebug를 여러 번 추천했습니다. 그러나 지금까지 Chrome에 내장 된 개발자 도구를 사용하고 있습니다. Firebug가 수행하는 모든 작업을 수행하는 것으로 보이며 보너스로 더 깔끔하고 조직적입니다.

디버깅이 더 발전함에 따라 Chrome의 DevTools에서 놓칠 수있는 Firebug의 기능이 있습니까? 그렇다면 그들은 무엇입니까?

관련 : Google 크롬 용 Firebug와 유사한 디버거

나는 처음부터 Firebug를 사용했고 그것은 불의 발명과 같은 신의 선물이었습니다. 그러나 Chrome이 디버거와 함께 나왔고 시도했습니다. Firebug를 계속 사용했지만 Chome의 개발 도구를 주시했고 마침내 v12에 JSON 도구가 추가 된 후 전환하지 않을 이유를 더 이상 찾을 수 없었습니다.

Chrome의 DevTools는 다음과 같은 이점을 제공합니다.

• 타임 라인, 프로파일 러 및 힙 분석기 내장
• 감사 도구 내장
• Local / SessionStorage, 쿠키, SqlLite DB, WebSQL, AppCache 등을 액세스하고 편집 할 수 있습니다.
• WebSockets 네트워크 스니핑
• JS 디버거에는 더 많은 기능 (예 : WebWorker 중단 점)이 있습니다.
• JS 디버거를 사용하면 JS를 즉석에서 편집하고 실행할 수 있습니다. (바이올린없이 JSFiddle)
• 원하는 경우 각 창에는 devtools 창이 있습니다. Firebug는 싱글 톤입니다.
• Firebug는 로딩 속도를 늦추고 인스펙터 기능에 CSS를 삽입하여 페이지를 교란합니다.

업데이트 : 2 년 후 저는 파이어 폭스 팀이 엄청난 성장을 한 것을 축하합니다. 즉, Chrome 팀과 디버거는 월 단위로 크게 도약하여 업계를 선도합니다. 위의 목록을 업데이트했지만 솔직히 전체 페이지를 채울 것입니다.

Chrome으로 전환 한 후 아직 놓친 Firebug 기능을 사용하지 않았습니다.

Chrome 개발자 도구가 Firebug의 기능을 대신했기 때문에 모든 주요 기능과 친숙 함이 있습니다 (예 : $0, 및 console객체).

DevTools에는 CSS 패널 이 없다는 것과 같은 몇 가지 작은 차이점이 있습니다 (CSS 스타일 시트는 Elements 패널 에서 조작 할 수 있음 ).

Chrome 도구에는 타임 라인 , 프로필 및 저장소 패널 이 추가로 있습니다 . [타임 라인] 패널로드, CSS 렌더링 및 자바 스크립트 구문 분석을 기록합니다. 프로필 패널 프로필 리소스 사용과 저장 패널 쇼와 사이트 데이터베이스의 변경, 로컬 스토리지, 세션 저장 및 쿠키를 할 수 있습니다.

마지막으로, 두 도구 모두 약간의 차이가있어 다양한 작업을 조금 더 쉽게 또는 더 어렵게 만듭니다. Firebug Lite 만 Chrome에서 작동하고 일반 Firebug의 많은 기능이 부족하기 때문에 Firefox 용 Firebug 및 Webkit 브라우저 용 DevTools를 사용하는 것이 좋습니다 (그리고 DevTools는 Chrome에 내장 됨).

Firebug를 사용하는 것이 훨씬 더 편합니다. 지금은 구체적인 사항을 생각할 수 없지만, 가끔 Safari 나 Chrome에서 디버깅을 시도 할 때 파이어 폭스를 시작하고 무엇이든 빠르게 처리 할 수있는 PITA처럼 보입니다.

DOM 탭은 하나의 장점입니다. Chrome과 동등한 것보다 접근성이 높고 잘 배치되어 있습니다. DOM 및 기타 JS 개체가 Firebug의 콘솔에 기록되는 방식을 선호합니다.

Pixel Perfect와 같은 Firebug 플러그인도 매우 유용합니다. Chrome에 이러한 도구가 있는지 여부를 모르겠습니다.

어쨌든 두 브라우저 모두에서 테스트해야하기 때문에 전반적으로 중요하지 않습니다. 그리고 IE는 IE의 개발 도구 (개선되었지만 여전히 FF 또는 Webkit에 비해 좋지 않음)와 비교할 수 있습니다.

Firebug에는 특별히 고급 기능이 없지만 Chrome에는없는 것으로 생각합니다.

편집 : 이것은 사실 이었지만 Chrome Dev Tools가 구현했습니다.

Firebug는 페이지에로드 된 모든 스크립트에서 검색 할 수 있습니다. Chrome 개발자 도구는 현재 선택된 스크립트 인 AFAIK에서만 검색 할 수 있습니다.

내가 말할 수있는 한, Firebug는 HTML 코드와 텍스트를 입력 할 때 실시간으로 편집 할 수있는 유일한 도구입니다. 예를 들어 텍스트가 컨테이너에 어떻게 들어가는 지 확인하고 한 번에 한 문자를 추가하려는 경우 매우 유용합니다.

Chrome에서 HTML을 편집 할 때 "편집 모드"를 종료하고 페이지의 변경 사항을 보려면 TAB 또는 Enter 키를 눌러야합니다.

Firebug에서는 HTML 코드를 바로 입력 할 수도 있습니다. Chrome에서는 마우스 오른쪽 버튼을 클릭하고 "HTML 편집"을 선택해야합니다. 그렇지 않으면 <b> 굵게 </ b>처럼 표시됩니다.

Chrome이 더 빨리 실행되는 것 같아서 정말 변경하고 싶지만 라이브 편집이 나에게 너무 중요합니다.

마우스 선택 방화범이 훌륭하지만 Chrome 개발자 도구에서 찾을 수없는 것 같습니다.

방화범에서 핫키를 찾을 수 없기 때문에 신경 쓰이는 반면 크롬은 완전히 부족합니다.

나는 멍청한 개발자이기 때문에 마우스는 여전히 개발할 때 대부분 사용됩니다.

이 질문을 받았을 때 Firebug는 짐승 이었지만 이제는 Chrome 개발자 도구 (DevTools)가 웹 개발자에게 편리합니다. Firebug와 함께 Firefox를 사용하여 웹 개발을 배웠기 때문에 Firebug에 대해 외치는 것은 아니지만.

웹 개발을위한 훌륭한 도구였으며 DevTools와 Firefox의 DevTools의 모든 주요 기능을 소개했습니다. 그러나 Firebug의 모든 기능을 다루지는 않지만 Chrome DevTools로 전환했습니다. Firebug보다 가볍고 훨씬 빠르기 때문에 localStorage에 액세스하는 것이 쉽게 정의되고 소스가 제 생각에 정리되어 있기 때문입니다.

여기에서는 Firebug에서 기능이 어떻게 고유한지 나열하겠습니다.

• 검색 :

  검색 옵션은 쉽게 액세스 할 수 있고 대소 문자를 구분 하고 정규식으로 키워드를 검색 할 수 있기 때문에 Firebug에서 잘 정의되어 있습니다 .

• DOM :

  DOM 구조는 쉽게 다양한와 방화범에 액세스 할 수있는 필터링 옵션 과 같은 표시 사용자 정의 속성 , 표시 사용자 정의 함수 등등.

• 쿠키:

  Firebug를 사용하면 자체 쿠키를 생성하고 쿠키 를 내보낼 수 있습니다.

• 네트워크 / 넷 :

  Firebug에는 DevTools에서 Network 라고 부르는 Net 패널이 있습니다. 둘 다 리소스를로드하기위한 모든 요청과 해당 상태를 분석하는 데 유용합니다. Firebug에서는 리소스의 원격 IP를 쉽게 파악할 수 있습니다 .

• 출처 :

  짝수하지만 소스 편집 DevTools로 사용할 수 있습니다, 내가 사용하는 동안 방화범이 더 나은 느낌 소스 편집을 사용자가 편집 할 수있는 DevTools로 내에서 CSS 파일을 원하는 경우, 당신이 이동하기 때문에, 소스 패널, 다음을 누릅니다 Ctrl+ O파일을 찾을 수 있습니다. 그래야만 파일을 편집 할 수 있습니다. Firebug에서는 모든 메뉴 탭 에서 소스 편집을 쉽게 찾을 수 있습니다 .

• dojo 지원 :

  내가 dojo 개발자 였을 때 Firebug는 Dojo Firebug Extension 을 사용하여 dojo 개발을 지원하도록 쉽게 확장되었습니다 .

객관적으로 볼 수있는 Firebug 2.0에는 Chrome DevTools에는없는 많은 작은 기능이 있습니다. 그중 일부는 다음과 같습니다.

콘솔 패널

• 전체 요청 정보를 포함하는 XMLHttpRequests를 표시합니다.
• 쿠키 변경 사항을 표시합니다.
• 더 많은 명령 줄 API 기능
• 별도의 명령 편집기

HTML 패널

• 속성 및 CSS 스타일에 대한 자동 완성 기능이있는 인라인 편집
• 변경 사항을 강조 표시하고 확장하고보기로 스크롤할지 여부를 제어하는 ​​옵션
• 엔티티 표시를 제어하는 ​​옵션
• 빠른 정보 상자

CSS 패널

• 형식화 된 방식으로 페이지의 스타일 시트를 표시합니다.
• 선택기 측면 패널

DOM 패널

• 모든 DOM 속성을 한 곳에 표시
• 클로저 표시
• 속성, 기능 등으로 디스플레이를 필터링 할 수 있습니다.

그물 패널

• XmlHTTPRequests에서 중지 할 수 있습니다.
• 요청 당 캐시 정보를 표시합니다.

쿠키 패널

• 쿠키 생성 및 편집
• 쿠키 권한 제어
• 원시 및 형식화 된 쿠키 크기를 표시합니다.
• 쿠키 변경시 스크립트 실행을 중지 할 수 있습니다.
• 표준 형식으로 쿠키 내보내기

일반

• 외부 편집기에서 HTML, CSS 및 JavaScript 열기
• 바로 가기를 사용자 지정할 수 있습니다.

유용성을 뛰어 넘는 "기능"은 Firebug가 오픈 소스라는 것 입니다. 그래서 누구나 참여할 수 있습니다.

그렇지만 Chrome DevTools (Firefox DevTools 포함)는 Firebug에 비해 더 많은 기능과 기타 더 작고 더 큰 장점을 가지고 있습니다. Firebug 뒤에있는 팀은 다른 DevTools 뒤에있는 팀에 비해 매우 작기 때문입니다.

또한 Firebug 3+는 기본 제공 Firefox DevTools에 통합됩니다. 이는 해당 버전이 Firefox DevTools의 모든 기능을 상속하고 추가 기능을 추가 할 수 있음을 의미합니다.

Firebug는 Firecookie 와 같은 다른 플러그인을 연결할 수 있습니다 . 나머지는 꽤 비슷하지만 제 생각에는 맛에 관한 것입니다.

또한 XPATH가 HTML 요소에 대한 CSS 선택기를 추가 할 수 있다고 추가합니다.

때때로 정말 편리합니다! :))) 하하하

나는 개발 도구가 비슷하다고 생각하지만 Chrome이 아무것도 캐시하지 않도록 강제하는 데 어려움을 겪었습니다. Chrome '캐시 사용 안함'설정조차도 100 % 작동하지 않았습니다. 이유를 잘 모르겠습니다.

Firefox / Firebug에서는이 문제가 없었으므로 여전히 사용하고 있습니다.

내 몇 센트 추가 ...

1. Chrome Inspector는 Firebug가 매력처럼 이것을 할 수있는 곳에서 CSS 속성을 알파벳순으로 정렬 할 수 없습니다. 일부 CSS 요소를 검사 할 때 도움이되며이를 잡을 필요가 있습니다.

   좋은 CSS 코딩 관행에 따라 코드에서 CSS 속성을 알파벳순으로 정렬하는 것이 항상 좋습니다.

2. 많은 스크립트와 관련된 프로젝트에서 작업 할 때 스크립트 태그 아래의 firebug에는 제공된 제안 상자에서 js 파일을 검색하는 옵션이 있습니다. 크롬과 마찬가지로 js 파일의 네임 스페이스를보고 트리를 순회하는 데 지루한 JS 파일을 찾을 수있는 절름발이 트리보기가 있습니다.

   이 옵션은 프로젝트에서 JS 파일이 거의없는 사람에게는 영향을 미치지 않을 수 있습니다. 이 기능은 내 스크립트가 1000 개가 넘는 JS 파일 일 때 사용하는 방화범과 함께 사용됩니다.

오늘 거의 전환했지만 Chrome에서 수정 된 CSS를 마우스 오른쪽 버튼으로 클릭하고 방화범에서 할 수있는 것처럼 Rule 또는 Style 선언을 복사 할 수 없다는 것을 알았습니다. 파이어 폭스가 갑자기 빨기 시작하지 않았 으면 좋겠다. 그렇지 않으면이 문제가 없었을 것입니다.

크롬 디버거를 사용하면 FireBug가 익명 함수 만 표시하고 실제 함수를 전혀 인식하지 못하는 GWT 프로젝트의 jsni를 디버깅 할 수 있습니다.

저는 Chrome 개발 도구를 좋아하지만 가끔 방화범의 강력한 기능을 놓쳤습니다.

• 조건부 중단 점 : 특정 조건에서만 일시 중지합니다.
• 함수 호출 로깅 : 함수를 표시하고 콘솔에서 알고 싶은 모든 것을 확인합니다.
• Break On Property Change : Mark 객체와 디버거는 속성이 변경되면 일시 중지됩니다.

"편집 및 재전송"요청 기능

Firefox 개발자 도구의 "편집 및 재전송"기능 (Replay XHR 또는 Firebug의 항목)을 사용하면 요청 헤더, 요청 본문, http 메서드 및 URL을 포함한 요청의 변경 사항으로 XHR 요청을 재생할 수 있습니다. Google Chrome의 Replay XHR은 단순히 요청을 재생하며 요청에 대한 수정을 허용하지 않습니다.

이 기능이 필요할 때 Firefox Devtools를 사용합니다.