• 깃허브 탐색하다 보면 프로젝트 루트에 .gitignore부터 시작해서
• 탐색할 때 그다지 중요하지 않는 여러 파일들이 나열되어 있다
• hide files on github 크롬 익스텐션을 설치하면 깔끔하게 탐색할 수 있다

• 숨길 파일들을 직접 설정도 가능하다!

참고

• https://github.com/sindresorhus/hide-files-on-github

• 모바일에서 동작하는 devicemotion 이벤트 등 디버깅하기 위해 개발자 도구를 봐야 했다
• 모바일에서 개발자 도구를 어떻게 켜는지 등 찾아보다가
• 핸드폰을 데탑에 연결하고
• 데탑의 크롬에서 console의 출력 결과를 확인할 수 있다
• 그리고 모바일 화면을 미러링 해준다

하는 법

“[Android 개발] 크롬 개발자 도구 모바일 디버깅/Mobile Debugging/ PC에서 모바일 디버깅 / 모바일 개발환경 구축”
https://backstreet-programmer.tistory.com/30

• 위 블로그를 참고해서 핸드폰과 데탑을 연결했다

포트포워딩 하기

• devicemotion, geolocation 등 보안 컨텍스트가 필요한 Web API의 경우 localhost로 만들어줘야 한다
• 내부IP:PORT 해서 접속은 할 수 있지만,
• devicemotion가 정상 동작하려면 localhost여야 한다

상황

• 데탑에서 웹 개발 진행 중

• 로컬에서 5500 포트로 웹서버가 열려있음

• 모바일에서 위 웹서버에 접속하려면 내부아이피:포트를 입력해야함

• 모바일에서 localhost:5500을 입력해서 접속할 수 있도록 해보자

• chrome://inspect/#devices 에 접속한다

• 내 핸드폰이 잘 연결되었는지 확인한다

• 포트 포워딩 버튼을 누른다

• 5500 포트와 localhost:5500을 매칭시켰다
• 이제 핸드폰 크롬에서 localhost:5500으로 접속하면 웹서버에 접속할 수 있다!
• 물론 Web API도 모두 잘 동작한다

참고

• https://backstreet-programmer.tistory.com/30

• chrome이 관리자 권한으로 켜져있는지 확인한다
• 관리자 권한으로 켜지면 드래그 앤 드랍이 작동하지 않는다

TMI

• 웹에서 드래그 앤 드랍으로 이미지를 첨부하는 기능을 넣었는데,

• 이상하게 마우스 커서가 위 처럼 되면서, 동작하지 않았다
• 막 chrome://flags 들어가서 설정도 따라해보고,
• windows 이미지 도구? 도 재설치해보고 삽질을 마구마구하다가
• 그냥 관리자 권한으로 chrome이 켜져 있어서 안되었던 문제이다

• 이밖에도 chrome이 관리자 권한으로 켜져있으면 안되는 것은,
• 카톡 등 메신저에서 다른 링크를 켤 때 정도가 있다

• chrome이 관리자 권한으로 켜지는 이유는
• 나는 vscode가 관리자 권한으로 실행되게 해놨다,
• 그래서 vscode에서 브라우저를 실행시킬 때 관리자권한으로 실행된다

1
2
3
4
5

node --inspect      app.js
node --inspect-brk  app.js

nodemon --inspect     app.js
nodemon --inspect-brk app.js

• node app을 크롬 개발자 도구로 디버깅 할 수 있다
• chrome://inspect/#devices

• --inspect-brk 옵션은 코드 시작전 멈추는 옵션이다

참고

• Debugging in 2017 with Node.js
• Node.js 8 inspector

• 브라우저에서 js 코드 실행속도가 이상하게 느려져서 어떤 문제인가했는데,
• 개발자도구를 새창으로 열고(콘솔보는용도로)
• 탭을 백그라운드로 보내버렸더니 생긴문제였다
• setTimeout, setInterval 메서드의 경우 탭이 인액티브 상태이면 1초 이상으로 제한된다고 한다
• 인액티브 상태는 최소화하는 등 화면에서 사라지는 경우를 말하는 것 같다

1
2
3

setInterval(() => {
  log(1);
}, 100);

• 위코드를 작성하고 개발자도구 콘솔창을 새창으로 열고
• 탭을 최소화하면 1초 간격으로 실행되는 것을 확인 할 수 있다

참고

• WindowOrWorkerGlobalScope.setTimeout() - Web APIs | MDN
• Javascript performance when running in an unfocused tab

• 크롬 개발자 도구는 진짜 치트키
• 특히 이걸 알고시작하면 주먹구구식으로도 뭔가를 만들어낼 수 있다!
• F12 키로 개발자도구를 켠다

요소선택

• 개발자도구 상단에보면 네모에 호버하고 있는 마우스 아이콘을 클릭하거나
• Ctrl + Shift + C 키로 요소를 선택할 수 있는 모드로 들어갈 수 있다

• 이 모드가 켜지면 커서있는 곳의 html 요소를 선택할 수 있다

• 클릭을하면 개발자도구에 해당 html 요소가 있는 라인이 하일라이트되어 보여지며
• 원하는 요소를 더블클릭또는 f2를 눌러 html을 수정할 수 있다
• 여기서 수정한 내용은 화면에 바로 반영되어 보여진다
• 스타일도 적용해볼 수 있으며, 자동완성을 지원해서 속성명을 자세히 몰라도 이것저것 시험해볼 수 있다
• 당연하게도 새로고침하면 수정사항이 모두 날라간다
• 이렇게 저렇게 브라우저에서 시험삼아해보고 이게 좋다하면 에디터로 돌아와 코드에 추가해서 적용시켜볼 수 있겠다

Copy selector, Copy JS path

• 나는 이거를 정말 많이쓴다

Copy selector 결과
body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a

• 내가 원하는 요소의 셀렉터를 찾아준다
• css를 적용하거나, 셀렉터를 쓸필요가있을 때 유용하다

Copy JS path 결과
document.querySelector("body > section > div > div > div.column.order-2.column-main.is-9-tablet.is-9-desktop.is-9-widescreen > div:nth-child(1) > article > h1 > a")

• Copy selector와 다른점은 document.querySelector로 감싸준다

debugger

• 이것도 신기한 기능이다

• 디버깅하고싶은 소스코드 중간에 debugger라는 키워드를 적어놓으면,
• 개발자도구가 열렸을 때, 코드가 실행되다가 debugger를 만나면 실행이 멈추고,
• 해당 위치에서 코드를 한줄씩 실행시켜 볼 수도 있고 그렇다

• 웹을 수정할때 가끔 브라우저 캐시때문에 원하는 모양이 안나오는 경우가 있다

강력 새로고침하는 법

• F12로 크롬 개발자 도구창을 킨다
• 브라우저 상단 새로고침 아이콘에 우클릭을하면 3개의 새로고침 메뉴가 나온다. (개발자 도구창이 안켜져있으면 안나옴)
• 그밖에도 단축키를 이용하는 방법이 있다