브라우저 개발자 도구의 비밀
(christianheilmann.com)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 등으로 피드백 주기
좀 다른 관점으로는, 사용자와 개발자가 같은 도구를 가진다는 점인데요. 그래서 웹앱은 편법적 악의적인 사용자 대처에 신경을 많이 써야할 듯 합니다.
console.log() 관련 글
- https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…