Chrome에서 웹 검사기를 어떻게 검사합니까?

Chrome에서 웹 검사기를 어떻게 검사합니까?

---

Google에 따르면 Chrome에서 "chrome-devtools : //devtools/devtools.html"을 방문하여 수행 할 수 있지만 이제는 안정적인 버전의 Chrome (또는 Canary)에서 해당 페이지를 방문하면 99 % 제거 된 버전이 표시됩니다. 조사관.

내 "제목"을 반복하는 것은 검사관을 "검사"하는 것과 관련이 있습니다. 일반 웹 페이지를 검사하는 것만이 아닙니다.

문제를 해결하기 위해 알 필요는 없다고 생각하지만 검사관을 검사하여 Paul Irish와 여기에서 논의한대로 스타일을 지정할 수 있습니다. http://darcyclarke.me/design/skin-your-chrome -조사관/

---

다음의 쉬운 단계를 따르십시오!

1. 를 눌러 Command+ Option+ i( Ctrl+ Shift+ iWindows에서) 열린 DevTools로한다.

2. 개발자 도구가 새 창에 고정 해제되었는지 확인합니다. 메뉴에서 도킹을 해제해야 할 수 있습니다.

3. 이 새 창에서 Command+ Option+를 i 다시 누릅니다 .

4. 그러면 DevTools에서 DevTools가 열립니다.
   • 원하는 경우 페이지의 DevTools를 다시 도킹 할 수 있습니다.
5. 아직 선택하지 않았다면 Elements를 선택하십시오 . 이것은 속성 상단에있는 첫 번째 아이콘입니다.

---

질문의 범위를 약간 벗어나지 만 Chrome 개발자 도구 : 원격 디버깅의 작동 방식을 이해하면 문제가 발생하는 이유를 이해할 수 있습니다 .

---

1. chrome : // inspect를 엽니 다.
2. 해당 페이지에서 인스펙터를 엽니 다 (cmd + alt + i).
3. 페이지 하단으로 스크롤하고 Other섹션에서 검사 링크를 클릭합니다.

Other섹션 의 URL은 다음과 같습니다. chrome-devtools : //devtools/devtools.html? docked = true & dockSide = bottom & toolbarColor = rgba (230,230,230,1…

편집 : 그들은 chrome : inspect 페이지를 좋아 했으므로 지금 작동하려면 왼쪽의 기타 헤더를 ​​클릭해야합니다.

---

방금 작동하도록했습니다. 핵심은 '원격 디버깅'모드에서 크롬을 시작해야한다는 것입니다.

OSX에서 터미널 창을 열고 다음을 실행합니다.

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows에서는

chrome.exe --remote-debugging-port=9222

(더 나은 Windows 지침은 https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote 에서 찾을 수 있습니다. )

그러면 포트 9222의 로컬 웹 서버에 디버깅 메시지를 보내는 chrome 인스턴스가 시작됩니다.

해당 웹 서비스에 액세스하면 인스펙터를 사용하여 실행중인 모든 크롬 창을 검사 할 수 있습니다. 인스펙터를 검사하고 싶기 때문에 먼저 인스펙터 윈도우를 시작해야합니다 (위와 같이 단축키 사용, Mac의 경우 Command + option + i).

이제 계속해서

http://localhost:9222

디버거에 표시 할 창 목록이 표시됩니다. "개발자 도구"로 시작하는 창을 선택하면 인스펙터의 CSS를 검사 할 수 있습니다.

아래 이미지에서는보기 어렵지만 왼쪽에는 도구 모음 레이블 중 하나를 강조 표시하는 원격 디버거를 가리키는 크롬 창이 있습니다. 오른쪽에는 마치 웹 페이지를 디버깅하는 것처럼 도구 설명이 표시됩니다.

---

A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.

Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..

편집 II : 왜 검사 할 수 없는지 잘 모르겠습니다. JDavis의 답변은 Apple 컴퓨터 용 Google 문서와 일치합니다. Linux를 사용하는 경우 Windows와 동일한 것으로 보입니다. 포커스가 인스펙터 창 위에있는 동안 인스펙터 키 조합을 눌러야합니다.

참고 URL : https://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome