웹 개발 도구

Web development tools
요소 선택기 및 CSS 속성 편집기가 있는 페이지 검사기

웹 개발 도구(흔히 devtools 또는 검사 요소라고 함)는 웹 개발자가 자신의 코드를 테스트하고 디버그할 수 있게 해준다. 웹페이지의 직접적인 생성에 도움이 되지 않고 웹사이트나 웹 어플리케이션의 사용자 인터페이스를 테스트하는 데 사용되는 도구라는 점에서 웹사이트 구축자, IDE(통합개발환경)와는 다르다.

웹 개발 도구는 웹 브라우저에서 브라우저 추가 기능 또는 내장 기능으로 제공된다. Google Chrome, Firefox, Internet Explorer, Safari, Microsoft Edge, Opera와 같은 대부분의 인기 웹 브라우저에는 웹 개발자를 돕기 위한 도구가 내장되어 있으며, 각각의 플러그인 다운로드 센터에서 많은 추가 기능을 찾을 수 있다.[1]

웹 개발 도구는 개발자들이 HTML, CSS, DOM, JavaScript, 그리고 웹 브라우저에서 처리되는 다른 컴포넌트들을 포함한 다양한 웹 기술들로 작업할 수 있게 해준다. 더 많은 것을 하기 위한 웹 브라우저의 수요 증가로 인해,[2] 인기 있는 웹 브라우저들은 개발자들에게 적합한 더 많은 기능들을 포함하고 있다.[3]

웹 개발자 도구 지원

몇몇 주목할 만한 웹 브라우저들은 웹 디자이너와 개발자들이 그들의 페이지의 구성을 볼 수 있게 해주는 웹 개발자 도구에 대한 지원을 가지고 있다. 이들은 모두 브라우저에 내장되어 있으며 추가 모듈이나 구성이 필요하지 않은 도구들이다.

가장 많이 사용되는 기능

브라우저에 내장된 웹 개발자 도구는 웹 페이지의 항목 위를 맴돌면서 상황에 맞는 메뉴에서 "요소 검사" 또는 이와 유사한 옵션을 선택하여 일반적으로 액세스된다. 그 대신 열쇠는 또 다른 일반적인 지름길인 경향이 있다.[13]

HTML 및 DOM

HTML과 DOM 뷰어 및 편집기는 일반적으로 내장된 웹 개발 도구에 포함된다. HTML과 DOM 뷰어와 웹 브라우저의 뷰 소스 기능의 차이점은 HTML과 DOM 뷰어가 당신이 HTML과 DOM을 변경할 수 있게 하고 변경 후 페이지에 반영되는 변화를 볼 수 있게 해주는 것 외에, HTML과 DOM 뷰어는 당신이 그것이 렌더링된 대로 DOM을 볼 수 있게 해준다는 것이다.[14]

HTML 요소 패널은 선택과 편집 외에도 일반적으로 디스플레이 치수, 계단식 스타일시트 속성 등 DOM 객체의 속성도 표시한다.[15]

Firefox 버전 11 ~ 46의 기능인 3D 페이지 검사기.

파이어폭스 버전 11~46에는 WebGL을 이용한 3D 페이지 검사기가 설치되었는데, 여기서 페이지 표면에서 튀어나온 레이어로 요소의 내포화가 시각화되었다.[16][17]

웹 페이지 자산, 리소스 및 네트워크 정보

웹 페이지는 일반적으로 이미지, 스크립트, 글꼴 및 기타 외부 파일의 형태로 추가 콘텐츠를 로드하고 필요로 한다. 또한 웹 개발 도구는 개발자가 웹페이지에 로드되어 사용할 수 있는 자원을 트리 구조 리스트에서 검사할 수 있으며 스타일시트의 외관도 실시간으로 테스트할 수 있다.[18][19]

또한 웹 개발 도구는 개발자들이 로딩 시간과 대역폭 사용량이 얼마인지, 어떤 HTTP 헤더를 주고받고 있는지 보는 것과 같은 네트워크 사용에 대한 정보를 볼 수 있게 해준다.[20]

프로파일링 및 감사

프로파일링은 개발자들이 웹 페이지나 웹 응용 프로그램의 성능에 대한 정보를 포착할 수 있게 한다. 이 정보로 개발자들은 스크립트의 성능을 향상시킬 수 있다. 감사 기능은 페이지를 분석한 후 페이지 로딩 시간을 줄이고 응답성을 높이기 위한 최적화를 위해 개발자에게 제안할 수 있다. 또한 웹 개발 도구는 일반적으로 페이지 렌더링에 걸리는 시간, 메모리 사용량 및 발생하는 이벤트 유형에 대한 기록을 제공한다.[21][22]

이러한 기능들은 개발자들이 그들의 웹 페이지나 웹 응용 프로그램을 최적화할 수 있게 해준다.[23]

자바스크립트 디버깅

자바스크립트는 웹 브라우저에서 흔히 사용된다. 웹 개발 도구는 일반적으로 개발자가 JavaScript를 디버깅하면서 watch 표현식, 중단점, 통화 스택 보기, 일시 중지, 단계적 전환, 단계적 개입, 기능 이탈 등을 가능하게 하여 스크립트를 디버깅하는 패널을 포함한다.

자바스크립트 콘솔은 일반적으로 포함되어 있다. 이 콘솔은 개발자가 자바스크립트 명령어와 호출 기능을 입력하거나 스크립트 실행 중에 발생할 수 있는 오류를 볼 수 있게 해준다.[24][25][26]

확장 및 플러그인

현대의 웹 브라우저는 기능을 추가하거나 증가시키기 위해 플러그 인이나 확장을 사용할 수 있도록 지원한다.[27] 다양한 추가 기능을 제공할 수 있는 공통 플러그인이 많다.

참고 항목

참조

  1. ^ "同性恋三级".
  2. ^ "Growing Demand for Web Developers". Bright Hub. 5 February 2009. Retrieved 2018-09-06.
  3. ^ "Latest Application Development Mobile Web Development - App Development, Application Trends". devworks.thinkdigit.com. Retrieved 2018-09-06.
  4. ^ "The Browser Console". Mozilla Hacks – the Web developer blog. Retrieved 2018-09-06.
  5. ^ "Web Console". MDN Web Docs. Retrieved 2018-09-06.
  6. ^ "Browser Console". Mozilla Developer Network. 13 August 2016. Retrieved 15 March 2017.
  7. ^ "Chrome DevTools Overview - Google Chrome". developer.chrome.com. Retrieved 2018-09-06.
  8. ^ McCormick, Libby. "F12 Developer Tools (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  9. ^ erikadoyle. "Microsoft Edge Developer Tools - Microsoft Edge Development". docs.microsoft.com. Retrieved 2018-09-06.
  10. ^ "Opera Browser Faster, Safer, Smarter Web Browser". www.opera.com. Retrieved 2018-09-06.
  11. ^ Inc., Apple. "Tools - Safari - Apple Developer". developer.apple.com. Retrieved 2018-09-06.
  12. ^ Safari 버전 기록
  13. ^ "Chrome DevTools".
  14. ^ McCormick, Libby. "Introduction to F12 Developer Tools (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  15. ^ "Inspect and Edit Pages and Styles Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  16. ^ "Firefox gets 3D page inspector tool". 10 January 2012. Archived from the original on July 9, 2021. Retrieved 1 July 2021. Cite 저널은 필요로 한다. journal= (도움말)
  17. ^ "3D view - Firefox Developer Tools MDN". developer.mozilla.org. From Firefox 47 onwards, 3D view is no longer available.
  18. ^ "Resources Panel - Google Chrome". developers.google.com. Retrieved 2018-09-06.
  19. ^ "Firefox Debuts New Developer Toolbar". The Mozilla Blog. Retrieved 2018-09-06.
  20. ^ "Measure Resource Loading Times Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  21. ^ "Profiles Panel - Google Chrome". developers.google.com. Retrieved 2018-09-06.
  22. ^ McCormick, Libby. "F12 developer tools console error messages (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  23. ^ McCormick, Libby. "Using the Profiler Tool to analyze the performance of your code (Windows)". msdn.microsoft.com. Retrieved 2018-09-06.
  24. ^ "New Firefox Command Line helps you develop faster". Mozilla Hacks – the Web developer blog. Retrieved 2018-09-06.
  25. ^ "Opera Browser Faster, Safer, Smarter Web Browser". www.opera.com. Retrieved 2018-09-06.
  26. ^ "Using the Console Tools for Web Developers". Google Developers. Retrieved 2018-09-06.
  27. ^ "More browser features, fewer plugin updates Firefox". Mozilla. Retrieved 2018-09-06.