https://christianheilmann.com/2021/11/01/developer-tools-secrets-that-shouldnt-be-secrets/ 1. Console엔 'log()' 이상으로 많은 기능이 있음 - 필터링 옵션 - {} : 변수 값/이름 같이 찍기 - warn/info/error() : 로그 레벨 - assert(): 특정 조건시에만 출력 - trace(): 누가 호출했나 - group(): 메시지 그룹핑해서 펼치기/접기 가능 - table(): 정보를 테이블로 출력하기 - $() = document.querySelector(), $$() = document.querySelectorAll() ㅤㅤ$$('a').map(a => { ㅤㅤㅤreturn {url: a.href, text: a.innerText} ㅤㅤ})
2. 소스코드 접근없이 로그 남기기 - Live Expressions : 실시간으로 변경되는 변수 값 확인 - logpoints : 특별한 형태의 브레이크포인트로 해당 라인 실행시에 로그를 출력. 기술적으로는 console.log를 웹페이지 어디든 추가 가능한 것
3. 브라우저 외부에 로그 남기기 - VS Code Debugger
4. 어떤 사이트에든 코드 인젝션 하기 (크로미엄 브라우저들 : 엣지, 크롬, 브레이브..) - Snippets : 현재 웹사이트에 대해 스크립트 실행 - Overrides : 리모트 스크립트의 카피본을 저장해두고 수정한다음 페이지 로딩될 때 오버라이드
5. 더 많은 곳에서 Inspect & Debug 가능 (크로미엄 브라우저들) - Electron 계열은 모두 지원 : GitHub Desktop, VS Code, 브라우저의 Developer Tools자체도 Developer Tools로 디버깅 가능 - MS Edge Tools for VS Code
6. 지저분한 비밀들 - 사람들의 개발자 도구의 일부만 사용. 아마도 설명 문서가 부족하기 때문인듯 해서, 많은 시간을 들여 문서를 만들었지만 그게 해결책은 아닌듯 - 개발자 도구는 점점 복잡해지고 수많은 기능에 압도되게 됨. 개선하기 위한 방법이 없을까 ? ㅤ→ Edge는 Focus Mode 도입하려고 함. 모든 기능을 보여주는 대신 유스케이스 별로 필요 도구만 보여주는 것 ㅤ→ Informational Overlays도 작업중. 개발자 도구에 바로 볼 수 있는 도움말을 제공하는 것 - 코드 작성과 완성물 디버깅 사이에는 아직 단절이 있음 ㅤ→ 브라우저 개발자 도구에서 변경한 것이 코드에 어떻게 반영되게 할까 ? ㅤ→ 하나는 개발자 도구를 VSCode로 대체하고, 도구 사용시 하드 드라이브의 파일을 직접 변경하게 하는 것 ㅤ→ 다른 하나는 VSCode 확장의 일부로, 개발자 도구를 사용해서 변경해도 디스크의 파일 변경이 가능하게 선택할수 있게 하는 것
7. 당신이 개발자 도구의 Audience 이자 Client임 ㅤ→ Report a Bug / Request a Feature 등으로 피드백 주기
음성 기능은 200자로 제한됨 | 
