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를 선택할 수 있습니다.
공유로 마음을 전하세요
늘 그렇듯이, DevTools와 관련된 모든 것에 대한 의견이나 아이디어를 보내주세요.
- Twitter의 ChromeDevTools에 핑하여 간단한 질문이나 의견을 보내거나 새로운 아이디어를 공유해 주세요.
- 긴 토론의 경우에는 메일링 리스트나 Stack Overflow를 사용하는 것이 가장 좋습니다.
- 문서와 관련된 모든 사항은 문서 저장소에서 문제를 여세요.
- 언제든지 팀에 바로 버그를 신고하거나 Crbug의 기능을 요청할 수 있습니다.
다음 달까지
케이시