DevTools의 새로운 기능 (Chrome 76)

케이스 바스크
케이스 바스크

안녕하세요. Chrome 76의 Chrome DevTools에 포함된 새로운 기능은 다음과 같습니다.

CSS 값으로 자동 완성

DOM 노드에 스타일 선언을 추가할 때 선언 값을 선언 이름보다 기억하기가 더 쉬운 경우가 있습니다. 예를 들어 <p> 노드를 굵게 만들면 bold 값을 font-weight라는 이름보다 더 쉽게 기억할 수 있습니다. 이제 Style 창의 자동 완성 UI가 CSS 값을 지원합니다. 원하는 키워드 값은 기억하지만 속성 이름은 기억나지 않는 경우 값을 입력해 보세요. 자동 완성을 사용하면 원하는 이름을 찾는 데 도움이 됩니다.

&#39;bold&#39;를 입력하면 스타일 창이 &#39;font-weight: bold&#39;로 자동 완성됩니다.

그림 1. bold를 입력하면 스타일 창이 font-weight: bold로 자동 완성됩니다.

Chromium 문제 #931145로 이 새로운 기능에 관한 의견을 보내주세요.

네트워크 설정을 위한 새로운 UI

이전에는 Network 패널에서 DevTools 창이 좁을 때 제한 메뉴와 같은 옵션에 연결할 수 없는 사용성 문제가 있었습니다. 이 문제를 해결하고 네트워크 패널을 깔끔하게 정돈하기 위해 덜 사용되는 옵션 몇 가지를 새로운 네트워크 설정 네트워크 설정 버튼 창 뒤로 이동했습니다.

네트워크 설정

그림 2. 네트워크 설정으로 이동합니다.

Use Large Request Rows, Group By Frame, Show Overview, Capture Screenshots 옵션을 네트워크 설정으로 이동했습니다. 그림 3은 이전 위치를 새 위치에 매핑합니다.

이전 위치를 새 위치로 매핑

그림 3. 이전 위치를 새 위치로 매핑

Chromium 문제 #892969로 이 UI 변경사항에 관한 의견을 보내주세요.

HAR 내보내기의 WebSocket 메시지

동료와 네트워크 로그를 공유하기 위해 Network 패널에서 HAR 파일을 내보낼 때 이제 HAR 파일에 WebSocket 메시지가 포함됩니다. _webSocketMessages 속성은 커스텀 필드임을 나타내는 밑줄로 시작됩니다.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Chromium 문제 #496006으로 이 새로운 기능에 관한 의견을 보내주세요.

HAR 가져오기 및 내보내기 버튼

새로운 Export All As HAR With Content 내보내기Import HAR File 가져오기 버튼으로 네트워크 로그를 동료와 더 쉽게 공유하세요. HAR 가져오기 및 내보내기는 한동안 DevTools에 있었습니다. 새로운 변경사항은 검색 가능성이 커졌습니다.

새로운 HAR 버튼입니다.

그림 4. 새로운 HAR 버튼입니다.

Chromium 문제 #904585로 이 UI 변경사항에 관한 의견을 보내주세요.

실시간 총 메모리 사용량

이제 Memory 패널에 총 메모리 사용량이 실시간으로 표시됩니다.

실시간 총 메모리 사용량입니다.

도표 5. 메모리 패널 하단에 페이지가 총 43.4MB의 메모리를 사용 중인 것으로 표시됩니다. 209KB/s는 총 메모리 사용량이 초당 209KB 증가하고 있음을 나타냅니다.

실시간으로 메모리 사용량을 추적하려면 성능 모니터도 참고하세요.

Chromium 문제 #958177로 이 새로운 기능에 관한 의견을 보내주세요.

서비스 워커 등록 포트 번호

디버깅 중인 서비스 워커를 더 쉽게 추적할 수 있도록 이제 서비스 워커 창의 제목에 포트 번호가 포함됩니다.

서비스 워커 포트

그림 6. 서비스 워커 포트

Chromium 문제 #601286으로 이 UI 변경사항에 관한 의견을 보내주세요.

백그라운드 가져오기 및 백그라운드 동기화 이벤트 검사

Application 패널의 새로운 Background Services 섹션을 사용하여 백그라운드 가져오기백그라운드 동기화 이벤트를 모니터링할 수 있습니다. 백그라운드 가져오기 및 백그라운드 동기화 이벤트가 백그라운드에서 발생한다는 점을 고려할 때 DevTools가 열려 있는 동안 DevTools가 백그라운드 가져오기 및 백그라운드 동기화 이벤트만 기록한 경우 그다지 유용하지 않을 수 있습니다. 따라서 기록을 시작하면 탭을 닫은 후, 그리고 Chrome을 닫은 후에도 백그라운드 가져오기 및 백그라운드 동기화 이벤트가 계속 기록됩니다.

Application 패널로 이동하고 Background Fetch 또는 Background Sync 탭을 열고 Record 녹화를 클릭하여 이벤트 로깅을 시작합니다. 이벤트를 클릭하면 자세한 정보를 확인할 수 있습니다.

Background Fetch 창

그림 7. Background Fetch 창 데모: Maxim Salnikov

Background Sync 창

그림 8. Background Sync 창

Chromium 문제 #927726으로 새로운 기능에 관한 의견을 보내주세요.

Firefox용 Puppeteer

Firefox용 Puppeteer는 Puppeteer API로 Firefox를 자동화할 수 있는 새로운 실험용 프로젝트입니다. 즉, 아래 동영상과 같이 이제 동일한 Node API를 사용하여 Firefox와 Chromium을 자동화할 수 있습니다.

node example.js를 실행하면 Firefox가 열리고 page 텍스트가 Puppeteer 문서 사이트의 검색창에 삽입됩니다. 그런 다음 Chromium에서 동일한 작업이 반복됩니다.

Firefox용 Puppeteer 및 Puppeteer에 관해 자세히 알아보려면 Google I/O 2019에서 JoelAndrey의 Puppeteer 강연을 확인하세요. Firefox 공지는 4:05 무렵에 이루어집니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

  • crbug.com을 통해 제안 또는 의견을 제출하세요.
  • DevTools에서 옵션 더보기   더보기   > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
  • @ChromeDevTools로 트윗을 보냅니다.
  • DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 사항의 목록

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59