6. 개발자도구

아무 사이트나 가서 F12단축키를 누르거나 마우스 우측버튼 -> 검사(N)을 누르면

​

개발자 도구라는 것이 나타난다.

​

​

개발자도구는 여러가지 기능들이있는데 그중에 좌측상단의 Selecet~어쩌고 버튼을 클릭한 후

​

웹브라우저에서 원하는 것을 클릭하면 그것이 어떤 코드로 이루어져 있는지 찾아서 보여준다

​

​

​

그 옆에는 toggle device toolbar라는 버튼이 있는데 그것을 누르면

​

현재 있는 웹사이트가 다른 기기에서는 어떤식으로 보이는지 알 수 있다

​

가령, iPad에서는 어떻게 보이는지 알고싶으면 버튼을 누르고 Responsive에서 iPad를 클릭하면

​

iPad화면에 실제로 어떻게 출력되는지 알 수있다.

​

​

​

​

마지막으로 Network 부분을 짤막하게 설명하면

​

우리의 웹 브라우저는 웹 서버에 설치되어있는 html을 웹서버로부터 받아서 화면에 표시해주는 장치인데

​

웹 브라우저와 웹서버가 주고받는 여러가지 데이터들을 경우에 따라서 체크해야할 필요가 생길 수 있다.

​

그 때 사용하는 도구가 Network탭 밑에있는 도구들인데

​

​

가령

​

이러한 코드가 있다고 하면

​

웹 브라우저는 우리들 몰래 웹서버에 접속해서 img.jpg파일을 다운받는다

​

그리고 그것을 img태그가 위치하고있는 그곳에 그 다운로드 받은 이미지를 표시해주는 방식으로 동작한다.

​

즉, 다운로드 받는 과정을 몰래하기때문에 만약 만든 웹페이지가 굉장히 많은 파일들을 다운받는다면

(img태그, iframe태그, JS, CSS 등)

​

그런경우 무엇이 누락됐는지 혹은 무엇이 지연돼서 웹페이지가 화면에 표시되는게 느려지고 있는지

​

이런것들은 분석하는게 까다롭다

​

​

이럴 때, 유용한것이 Network탭이다.

​