크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

크롬을 사용하는데 어느 날 갑자기 네이버 화면이 이상하다면? 글은 보이는데 메인 배너들이 안 보여서 군데군데 비어있는 모습이신가요? 그리고 유튜브를 접속했는데 리디렉션 횟수가 많다고 페이지가 작동하지 않습니다라고 뜨고 있나요?

이런 것은 크롬에서 자바스크립트가 차단되어서 오는 문제입니다. 자바스크립트는 웹 브라우저 상에서 화면이 동작하는 부분을 담당하는 프로그래밍 스크립트 언어로 화면을 동적으로 만들어주는 기능을 합니다. 이것이 차단되어 있으면 원래 보이던 것들이 안 보이게 되고 움직이던 것들이 안 움직이는 문제가 발생하게 되죠.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem
자바스크립트가 차단된 네이버 화면

위 이미지는 자바스크립트가 차단된 네이버 접속 화면입니다. 메인 배너와 우측 배너들이 안 보이는 상황이죠.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem
자바스크립트가 차단된 유튜브 화면

위 화면은 자바스크립트가 차단된 유튜브 화면입니다. 유튜브가 오류 나서 아예 화면이 송출되지 않는 모습입니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

문제를 해결하기 위해 크롬으로 들어가서 "더보기 > 설정"으로 들어갑니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

크롬 설정에서 "개인정보 및 보안 > 사이트 설정"으로 들어갑니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

사이트 설정에서 "자바스크립트"를 클릭해 줍니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

여기서 "사이트에서 자바스크립트를 사용할 수 있음"에 체크하면 차단이 해제됩니다.

반대로 자바스크립트를 차단하고 싶다면 "사이트에서 자바스크립트를 사용하도록 허용하지 않음"을 체크하시면 됩니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem
자바스크립트를 허용한 유튜브 화면

자바스크립트를 차단 해제(허용)한 후 유튜브를 다시 켜면 정상적으로 보이는 것을 확인하실 수 있습니다.

크롬 자바스크립트 안됨 - keulom jabaseukeulibteu andoem

크롬에서 만약 특정 사이트만 자바스크립트를 허용하고 싶다면 설정 화면에서 추가 버튼을 눌러 사이트를 등록해서 사용하시면 됩니다.

오류 확인

오류를 확인하는 방법 중 가장 좋은 방법 및 추천하는 방법은 크롬브라우저에서 F12를 누르는 것입니다.

우선 오류코드를 입력합니다

<!DOCTYPE html>

<html>

<head>

<title>alert()를 이용한 경고창 띄우기</title>

<script>

aler("Hello, JAVASCRIPT"); // 여기 alert함수에 t를 지웠습니다.

</script>

</head>

<body>

</body>

</html>

웹페이지를 실행하면 아무것도 뜨지 않을 겁니다. 크롬에서 F12를 누릅니다.

크롬에서 F12를 누른 화면입니다.

우측 하단에 경고가 뜨게 되고 이 경고를 누를 경우 

위와 같이 확인이 가능합니다.

다른 웹브라우저에서도 F12를 통해 오류를 확인할 수 있지만 조금 복잡한 과정을 거쳐야하므로 크롬에서 검사하는 것을 추천합니다.

인터넷 익스플로러와는 다르게 크롬은 자바스크립트 오류가 발생해도 알려주지 않거나, 알아서 수정해서 보여주곤한다. 사용자가 크롬에서만 웹어플리케이션을 사용한다면 문제가 없겠지만, 아직 국내에는 익스플로러 사용자가 많기에 양방향 모두 최적화를 해주어야 한다. 현재 개발자들은 크롬을 사용하는 경우가 많을텐데, 이번에는 크롬에서 자바스크립트 오류를 표시하는 방법을 알려주고자 한다.

1.

크롬을 실행한뒤, 오른쪽 상단에 메뉴버튼을 클릭한다.

2.

메뉴를 클릭한뒤, 설정을 클릭하면 크롬의 설정메뉴가 등장한다. 왼쪽에서 "확장 프로그램" 탭을 클릭하고, "더 많은 확장프로그램 다운로드"를 클릭해준다. 크롬 브라우저에 대한 마켓같은 곳이 열린다.

3.

검색창에 "JavaScript Errors Notifier"라고 검색한다. 본인은 이미 설치했기에 "평가하기"라고 나오지만, 설치 않았을때는 "+무료"라고 되어있을것이다. 무료버튼을 클릭하면 설치하겠냐고 물어보는 창이 등장하게 될텐데, 예를 클릭해준다.

4.

위 사진은 JavaScript Errors Notifier의 샘플사진이다.

Show errors stack trace : 에러에 대한 내용을 표시

Show errors column number : 원본 코드의 몇번째 줄에서 에러가 발생했는지 표시

Show notification popups for errors on phpc domain : php의 소스페이지인 phpc페이지에서 에러를 표시해준다는것같은데, 본인은 잘 모르는 부분이다.