개발 세계의 입문자라면??
내가 현재 작업하고 있는 코드에 오류가 있는지 없는지?
검색엔진, 웹접근성에 문제가 있는 코드인지~ 없는 코드인지 혼란스럽죠??
확인할 수 있는 방법을 알려드리겠습니다~!
방법으로는 chorme 브라우저의
extension을 사용하는 방법이 있습니다.
extension(확장프로그램) 설치부터~ 확인방법까지 알려 드리겠습니다.
v
v
v
v
v
1. Web Developer 설치
chorome 브라우저의 구글 검색창 Web extension 검색 하거나~
아래 남겨놓은 url을 통하여 바로 이동!하여 설치하면 됩니다.
https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ko
Web Developer - Chrome 웹 스토어
Adds a toolbar button with various web developer tools.
chromewebstore.google.com
2. Web Developer 설치완료 > extension 아이콘 및 리스트 확인가능
chrome에서 확장프로그램 설치를 마치고,
구글 브라우저를 보면~
우측 상단에 확장프로그램 아이콘을 확인 할 수 있습니다.
확장프로그램 아이콘을 설치하면~ 내가 설치한 extension리스트가 쭉 뜹니다!
그 중에 Web Developer 확인이 가능하다면 설치가 성공적으로 된 것 입니다.
3. Web Developer 확인
Web Developer 을 클릭하면
브라우저 우측 상단에 extension이 뜨는 걸 확인 할 수 있습니다.
그럼 이걸로 어떻게?!?!?!
내가 작업한 소스를 확인 할 수 있을까요???
먼저 첫번째,
마크업이 잘되었는지~ 확인 할 수 있습니다.
내가 작업중인 페이지의 css를 제거하여~
마크업! 즉 html 뼈대만 남은 상태를 확인 할 수 있습니다.
v
v
v
v
4. Web Developer 확인, 마크업 확인 가능
예를 들어볼까요?
다음 사이트에서 css소스를 제거해보겠습니다.
( Web Developer > CSS탭 > Disable All Styles 클릭 > css제거! )
css를 제거하게 되면~
style이 사라지고, html만 남게 됩니다.
이렇게 html만 남은 상태에서는,
SEO 검색엔진 분석이나 스크린리더(웹접근성 보조기기)가
페이지의 구조를 정확하게 파악 할 수 있습니다!
다음 두번째로,
Validate Local 확인 기능 입니다.
v
v
v
v
5. Web Developer 확인, Validate 체크
다음으로는~
내가 작업한 코드의 문제여부를 판단하는 방법이 있습니다.
내가 작업한 HTML 소스의 문제 여부를 판단 할 수 있습니다.
( Web Developer > Tools탭 > Validate Local Html 클릭 > html 소스 체크! )
Validate Local Html 클릭 하면 오류 여부를 확인 할 수 있습니다.
위에 이미지를 확인하면, 문제가 없기에 초록색으로 뜨고있죠?
만약 문제 있는 코드가 있으면~ 빨간색은 에러 메세지가 뜹니다.
(html뿐만 아니라~ css도 validate이 가능합니다.)
Chorme브라우저에 Web Developer extension을 설치하게 되면~
확장프로그램 내 다양한 기능들은 사용 할 수 있으니!
내가 만약? 필요로 하는게 있다면~
구글 확장 프로그램을 설치 Go Go 하세요
'DEV INFO' 카테고리의 다른 글
| CLI, GUI, Shell 기초 개념 정리 (0) | 2025.12.01 |
|---|---|
| picture 태그, 반응형 이미지를 구현하는 두 가지 방법 (1) | 2025.11.28 |
| picture 태그, 반응형 이미지를 만들 수 있는 태그 사용 방법 (0) | 2025.11.28 |
| vscode 터미널 shell 설정 방법, git bash로 변경 (0) | 2025.11.27 |
| VS Code HTMLtagWrap 확장기능 사용 방법, 텍스트 태그 감싸기 단축키 (0) | 2025.11.26 |