Chrome 개발자 도구 : 별도의보기 / 수직 타일로보기 콘솔 및 소스보기?

Chrome 개발자 도구 : Console탭과 Sources탭을 별도의보기로 보는 방법이 있습니까? 나는 종종이 두 가지를 동시에보고 싶다.

탭 Esc에서를 누르면 하단 Sources의 작은보기를 볼 수 있습니다 Console. 그러나 동시에 두 가지에 대한 더 큰 견해를 원합니다. 이게 가능해?

그렇지 않다면 크롬 확장 프로그램이 할 수있는 것입니까?

편집하다:

설명- 개발자 도구 창 을 도킹 해제 하는 방법을 알고 있습니다 (기본 설정). 그냥 욕심 나는 추측되는 궁금 내가 더 분할을 할 수있는 경우 Sources와 Console별도의 도킹 창에 (또는 적어도, 같은 창에 수직으로 자신의 견해 분할을 대신 수평의 등을 눌러 Esc않습니다)

수직 분할

왼쪽 하단에서 아이콘을 클릭하여 개발자 도구를 도킹 해제하면 새 도구로 이동합니다. 그런 다음을 눌러 Esc콘솔을 엽니 다.

창과 "소형 콘솔"모두 필요에 맞게 크기를 조정할 수 있습니다.

수평 분할

하단 대신 콘솔을 오른쪽에 배치하려면 을 편집하여 개발자 도구를 사용자 정의path/to/profile/Default/User StyleSheets/Custom.css 하고 다음 규칙을 추가하십시오.

편집 : 지원 Custom.css이 제거되었지만 여전히 새로운 API 인 chrome.devtools.panels.applyStyleSheet메소드 ( 샘플 코드 )를 사용하여 개발자 도구의 스타일을 변경할 수 있습니다 .

/* If drawer has been expanded at least once AND it's still expanded */
#-webkit-web-inspector #main[style*="bottom"]:not([style*="bottom: 0"]) {
    width: 50%;
    bottom: 0 !important;
}

#-webkit-web-inspector #drawer[style*="height"]:not([style*="height: 0"]) {
    /* The position of the drawer */
    left: 50% !important;
    /* styles to position the #drawer correctly */
    top: 26px !important;
    height: auto !important;
    z-index: 1;
    border-left: 1px solid rgb(64%, 64%, 64%);
}
#-webkit-web-inspector.show-toolbar-icons #drawer[style*="height"]:not([style*="height: 0"]) {
    top: 56px !important;
}

결과는 다음과 같습니다.

esc -바로 가기입니다.

또는

시 menu(the three dots)에 클릭show console drawer

오른쪽에서 "세 개의 점"을 누르고 "콘솔 서랍 표시"를 클릭하십시오.

OP는 아마도 3 년 전에 게시 한 이후로 다른 곳으로 이동했을 것입니다.

개발자 도구 창을 분할하는 방법을 모르지만 OP가 명확하게 요구 한 세로, 가로 및 자동 (기본) 패널 레이아웃 사이를 전환 할 수 있습니다. 나는 이것이 유용한 것으로 자주 발견했다.

1. 개발 도구 창의 오른쪽 상단에있는 3 점 메뉴를 엽니 다.
2. '설정'을 선택하십시오.
3. "일반"탭-> "모양"섹션
4. "패널 레이아웃"

더 쉬운 해결책은 왼쪽 하단 아이콘을 계속 누르고 있으면 다른 아이콘이 표시되며,이 아이콘을 선택하면 기본 브라우저 창의 오른쪽에서 콘솔을 볼 수 있습니다

입력 할 수 있지만 콘솔이 보이지 않고 크기를 조정할 수없는 경우 :

그런 다음 오른쪽 상단 모서리에서 DevTools를 도킹 해제하십시오 . 그런 다음 크기를 조정할 수 있습니다.

이 후 다시 도킹 할 수 있습니다.