Tech News

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 등으로 피드백 주기