DevTools Digest, 2016년 10월

Kayce님, 안녕하세요. 지난달 이후 DevTools의 새로운 기능을 업데이트하는 또 다른 다이제스트입니다.

Console의 새로운 기능

현재 Canary 버전인 Chrome 56에서 DevTools 콘솔은 CodeMirror를 기반으로 합니다. 이를 통해 다음과 같은 새로운 기능을 다양하게 사용할 수 있습니다.

입력 시 구문 강조 표시. 이전에는 DevTools에서 코드 블록이 평가된 후에만 구문을 강조 표시할 수 있었습니다.

일치 괄호 / 대괄호 / 중괄호 강조표시. 괄호, 중괄호 또는 중괄호가 추가로 있으면 DevTools에서 이를 빨간색으로 강조표시합니다.

일치하지 않는 괄호

일치하는 괄호, 대괄호 또는 중괄호가 그 옆에 있으면 회색으로 표시됩니다.

일치하는 괄호

스마트 반품. 여러 줄로 구성된 코드 블록을 입력하면 이제 DevTools가 Enter 키를 누를 때마다 새 줄을 만들지 아니면 코드를 실행할지 파악합니다. 예를 들어 Console에서 다음 for 루프를 평가한다고 가정해 보겠습니다.

for (var i = 0; i < 5; i++) {
  console.log(i);
}

이전에는 첫 번째 줄을 입력한 후 Enter를 누르면 DevTools에서 줄을 평가하여 오류가 발생했습니다. 코드 블록을 새 줄로 계속 표시하려면 Enter 키를 누르기 전에 Shift를 길게 눌러야 했습니다. 반면 이제는 Enter 키를 누르면 DevTools가 예상대로 새 줄에서 코드 블록을 자동으로 계속 진행합니다.

여러 커서. Command (Mac) 또는 Control+Alt (Windows, Linux)를 누른 상태에서 클릭합니다.

여러 커서

이제 카나리아에서 최상위가 아닌 컨텍스트를 빨간색으로 강조표시합니다.

최근에 콘솔에서 작업했다면 실행 컨텍스트 선택기top가 아닌 값으로 설정하는 끔찍한 버그에 물었을 수 있습니다.

이 버그는 이제 안정화 버전에서 수정되어야 하지만 안전을 위해 Canary의 DevTools (Chrome 56)에서 선택기를 빨간색으로 강조 표시하여 top 컨텍스트에 있지 않다는 경고를 표시합니다.

상단이 아닌 컨텍스트 빨간색으로 강조표시됨

새로운 사용자 에이전트: UC Browser

이제 네트워크 조건 창 탭에서 iOS, Android, Windows Phone용 UC Browser를 선택할 수 있습니다.

UC 브라우저 사용자 에이전트

공유로 마음을 전하세요

늘 그렇듯이, DevTools와 관련된 모든 것에 대한 의견이나 아이디어를 보내주세요.

  • Twitter의 ChromeDevTools에 핑하여 간단한 질문이나 의견을 보내거나 새로운 아이디어를 공유해 주세요.
  • 긴 토론의 경우에는 메일링 리스트Stack Overflow를 사용하는 것이 가장 좋습니다.
  • 문서와 관련된 모든 사항은 문서 저장소에서 문제를 여세요.
  • 언제든지 팀에 바로 버그를 신고하거나 Crbug의 기능을 요청할 수 있습니다.

다음 달까지

케이시