인파

You Can Become A

늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !

공부한 내용을 정리합니다
Tool/Chrome DevTools

🌐 개발자 도구에서 실시간으로 변수 값 감시하기

실시간으로 변수 값 감시하기 보통 변수 값의 변동 추이를 감시하기 위해서는 디버깅을 통해 가능하다. 다만 디버깅은 스크립트 실행을 단계별로 끊어 중지시켜 실행하기 때문에 아주 빈번하게 변동하는 변수값을 추적하기에는 약간 번거롭다. 따라서 만일 간단한 단일 변수의 변동을 추적한다고 하면, 개발자 도구의 콘솔탭에서 live expressoin 기능을 이용하면 된다. 예를 들어 다음과 같은 value 라는 변수의 값의 변동 추이를 추적하고 싶다면, 상단의 👁️ 모양의 버튼을 누르고, 입력란에 변수명을 기재해주면 실시간 추적이 된다. let value = 0; setInterval(() => { value++; }); 또한 여러개의 변수명을 등록하면 여러개의 변수를 추적 가능하다. 스코프 내 변수 추적하기 다만..

category_image
인파_
2022.11.19
(0)
Tool/Chrome DevTools

🌐 크롬 브라우저 화면 분할 방법

브라우저 화면 분할 화면 분할 기능은 여러 프로그램을 동시에 띄워서 작업하여 생산성을 올리는 많이 애용되는 기능이다. 구글링해서 웹문서를 찾는 일이 빈번해지면서 하나의 브라우저 창에서 탭을 이리저리 이동하는 것이 불편해서 찾아보다 괜찮은 크로미움 익스텐션을 찾아 소개해본다. 크롬 화면 분할이라고 거창하게 써놓았지만, 사실 그냥 브라우저창 하나 생성해서 분할하는 단순한 기능이다. 그래도 직접 손으로 일일히 가로는 줄이고 세로는 늘린다음 배치하는 이런 작업을 하나하나 창을 조정하는 것보다, 클릭 한번으로 자동으로 비율을 조정해줘서 편하게 화면 분할을 할 수 있다는 점은 괜찮다. Tab Resize Tab Resize - split screen layouts Split Screen made easy. Resi..

category_image
인파_
2022.06.04
(0)
Tool/Chrome DevTools

🔍 크롬으로 자바스크립트 디버깅 하기

디버깅(Debugging) ​디버깅(Debugging)은 컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정입니다. 중단점 (breakpoint) ​기능 단위로 구현하는 경우가 많으므로 하나의 기능이 끝날 때마다 여러가지 테스트, 디버깅이 필요할 수 있습니다. 여기서 중단점(Breakpoint)은 스크립트의 동작을 잠시 멈추도록하여 디버깅이 가능하게 해줍니다. 이때 원하는 위치에 중단점을 설정하여야 하는데 중단점을 추가하는 방법은 아래와 같이 두 가지 방법을 사용합니다. ​ i. 작성한 코드의 필요한 부분에 debugger 키워드를 추가하기 코드에 직접 debugger;라는 코드를 추가하는 방법입니다. 개발을 하는 도중 필요하다고 판단 즉시 코드를 추가하므로..

category_image
인파_
2021.10.12
(0)
Tool/Chrome DevTools

🧩 웹 개발에 도움되는 크롬 확장 프로그램 모음

웹 개발에 도움되는 크롬 확장 프로그램 웹 개발을 하는데 있어서, 쉽게 엘리먼트 정보를 취들할 수 있는 몇몇 크롬 확장 프로그램을 소개해 본다. 설치도 간단하고 사용도 간단하다. 이를 이용하면 개발자 도구를 들락날락 거릴 필요없이 고퀄리티의 다양한 정보들을 얻을 수 있을 것이다. ColorZila ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies chrome.google.com 확장프로그램에서 ColorZilla를 선택하고 Page Color Picker Active를 선택합니다. Page Color Picker Active 를 선택하면, 스포이드 모양이 나오고, 스포이드 모양을 추출하고자 ..

category_image
인파_
2021.10.12
(0)