크롬을 이용해 Javascript 간단하게 코딩하는 방법 - 자바스크립트 개발자 도구 이용 방법

크롬을 이용해 Javascript 간단하게 코딩하는 방법 - 자바스크립트 개발자 도구 이용 방법

Javascript

안녕하세요

요즘 웹개발에 빠져서 많이 알아보고 있는데요

오늘은 프론트엔드의 꽃 자바스크립트를

크롬에서 동작시키는 방법에 대해서 알아볼게요

 

먼저 크롬을 켜주셔야겠죠?

최근 크롬이 업데이트 되면서 cpu 이용율을 5배 개선했다고 해요

 

메모리 사용량도 줄였다고 하네요

www.bodnara.co.kr/bbs/article.html?num=166759

CPU 이용율 5배 개선, 메모리 사용량 줄인 크롬 신 버전 공개 :: 보드나라

 

크롬에서 오른쪽 상단에 도구창을 보시면

도구 더보기 > 개발자 도구

에서 개발자 도구를 켜실수 있고

맥북 사용자는 option + command + i 단축키로 킬 수 있어요

윈도우는 잘 모르겠습니다

 

여기서 Elements 는 현재 페이지의 HTML 소스를 보실 수 있어요

여기서도 물론 여러가지 값을 바꿔서 페이지가 어떻게 바꾸는지 볼 수 있어서 좋아요

HTML 코드 수정을 할 때는 이 페이지를 자주 이용합니다

 

 

하지만 저희는 자바스크립트 코드를 사용해 볼 것이기 때문에

바로 옆에 있는 Console로 들어가 주세요

 

여기서 이제 자바스크립트 코드를 작성해 보시면 되는데

마치 파이썬 IDLE 처럼 엔터를 누르면 바로 실행되게 됩니다

Shift + Enter 단축키를 입력하시면 추가 줄을 입력하셔서 코드를 작성해 볼 수 있습니다,

 

alert("hello")

알람 코드를 입력해 보시면

팝업창으로 hello 가 나오는 것을 볼 수 있어요

이렇게 간단하게 사용해 볼 때에는 유용하게 사용할 수 있어요

하지만 무거운 것을 돌리거나 라이브러리 같은 것들을 이용할 때에는

vscode 같은 IDE을 이용하시면 됩니다.

감사합니다 😄