Web Guide개발자도구문제 진단소통
브라우저 개발자도구로 문제 확인하기
화면이 이상하다는 말만으로는 제작사가 고칠 수 없습니다.
기본적인 확인 방법만 알아도 소통 시간이 크게 줄어듭니다.
01먼저 확인할 것
개발자도구를 열기 전에 간단히 걸러낼 수 있는 것들이 있습니다.
강제 새로고침저장된 옛 파일 때문인 경우가 많습니다.
다른 브라우저특정 브라우저만의 문제인지 확인합니다.
다른 기기내 컴퓨터만의 문제인지 봅니다.
시크릿 모드확장 프로그램 영향을 배제합니다.
네트워크사내망에서만 막히는 경우도 있습니다.
02기본 사용법
전문 지식이 없어도 쓸 수 있는 기능이 있습니다. 대부분 F12 키로 열립니다.
콘솔
빨간 오류 메시지가 있는지 봅니다. 가장 유용합니다.
요소 검사
특정 부분을 우클릭해 어떤 요소인지 확인합니다.
네트워크
무엇이 로딩에 오래 걸리는지 봅니다.
모바일 보기
휴대폰 화면 크기로 확인합니다.
캐시 비우기
새로고침 방식을 바꿔 확인합니다.
03제작사에 전달할 정보
이 정보들을 함께 보내면 왕복 확인 과정이 사라집니다.
점검 항목
페이지 주소
정확한 주소를 복사해서 보냅니다.
재현 순서
무엇을 어떻게 했을 때 발생하는지.
화면 캡처
전체 화면을 찍는 것이 좋습니다.
콘솔 오류
빨간 메시지를 캡처하거나 복사합니다.
환경 정보
브라우저 종류와 기기, 운영체제.
발생 시각
서버 기록과 맞춰보는 데 쓰입니다.
재현 여부
항상 발생하는지 가끔인지.
04흔한 오해
내 화면에서만 보이는 문제를 전체 문제로 보고하는 경우가 많습니다.
내 환경 문제
캐시, 확장 프로그램, 오래된 브라우저 · 화면 배율 설정 · 사내망 차단
실제 사이트 문제
여러 기기에서 동일하게 발생 · 콘솔에 오류 · 다른 사람도 같은 증상
CHECK POINT
□ 강제 새로고침을 해봤는가
□ 다른 브라우저와 기기에서 확인했는가
□ 시크릿 모드에서 확인했는가
□ 콘솔에 오류가 있는지 봤는가
□ 정확한 페이지 주소를 확보했는가
□ 재현 순서를 정리했는가
□ 화면 캡처를 준비했는가
□ 환경 정보를 함께 전달했는가
#개발자도구#문제 진단#소통#오류 보고#브라우저 호환#캐시#운영 관리#홈페이지 개발#웹비스타#홈페이지 제작