본문 바로가기

webdesign/HTML

Firefox Console, 퍼블리싱 체크

퍼블리싱 후 Console 창 확인할 것, 레이아웃이나 자바스크립트 동작 등의 가시적 에러가 없어도 콘솔 상의 메시지를 통해 코딩상의 모순을 바로잡을 수 있음

1. css 맵 파일이 서버에 없을때 보이는 메시지: Source map error: Error: request failed with status 404 Resource URL: https://----/res/css/style------.css Source Map URL: style-----.css.map

scss 컴파일 후 css파일을 올릴때 맵파일 함께 올려주기. scss 원본은 상관 없음

2. 애드 블락 설치하고 비지터 카운팅 소스 입혔을때 메시지: https://developer.mozilla.org/en-US/docs/Web/Privacy/Storage_Access_Policy/Errors/CookieBlockedTracker

3. 페이지에서 사용하지 않는 자바스크립트함수 호출했을때: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default  - 스크롤할때마다 옴팡진 양의 메시지가 좌르르... 🥲

해결: 메시지가 가리키는 함수 찾아서 지워줌, 예를 들어   현재 페이지에서는 사용하지 않고\ 있는 scrollAbout();을 호출하고 있는 경우의 에러, 수정을 안 한다 해도 콘솔 창의 에러 메시지 외에는 문제 없이 돌아감

window.onscroll = function () {
scrollHeaderM();
scrollTopMain();
scrollAbout();
};

4. Uncaught ReferenceError: $ is not defined <anonymous> http://-.-.-.-:--00/index.html:325

해당 페이지(html) 325줄, 비디오 스크립트 중 아래 부분 삭제

$(document).ready(function () {
setTimeout(toggleMute, 3000);
});

5. 원 프로그래스와 바형태 프로그래스 스크립트를 한 스크립트에 넣고 호출했을때: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default 

Uncaught TypeError: document.querySelector(...) is null

    updateProgressBar http://-.-.-.-:--00/--/js/progress.js:65
    EventListener.handleEvent* http://-.-.-.-:--00/--/js/progress.js:67

해결: 두 개 파일로 나누고 해당 페이지에서 사용하는 스크립트 파일만 링크 걸어줌

6. 스크롤 트리거 사용했을때... https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html