🧑‍💻개발/개발자도구 5

[개발자도구] AI를 이용해 디버깅을 해보자

안녕하세요 무택입니다 :)오늘은 우연히 개발자도구에서 AI기능을 발견해서 이 내용에 대해 포스팅해 보도록 할게요잉 개발에는 사알짝 발만 담그고 있는 저는 주로 개발자도구에서 Elements탭이랑 console탭만 살펴보는데 console탭에서 AI가 디버깅을 도와주는 기능을 발견했습니다.백엔드는 아무것도 몰라서 디버깅을 할 일은 없지만 이 기능에 대해 알아보도록 할게요  AI를 이용해 디버깅을 해보자 전제조건이 기능은 크롬만 사용이 가능합니다. 최신 버전의 크롬으로 확인해 주세요크롬에 로그인된 환경 1. 우선 기능을 사용하기 위해서는 개발자도구 설정에서 기능을 켜야 합니다.근데 언어를 영어로 설정해야 기능을 킬 수 있어요.(왜...)고분고분히 개발자도구 설정에서 언어를 영어로 변경해 줍시다.  2. 언어..

[크롬 개발자도구]웹사이트 폰트 크기 마음대로 바꾸기 (1rem 기준 설정 방법)

안녕하세요 무택입니다 :) 오늘은 크롬에서 폰트 셋팅 창에 대한 설명을 짧게 해보도록 하겠습니다. 1rem의 개념 1rem은 프론트엔드를 개발하면서 폰트 크기를 정할 때 주로 사용합니다. rem이란 px과 같은 단위의 한 종류인데 보통 1rem은 16px을 말합니다. 왜냐하면 브라우저의 기본 폰트 사이즈가 16px로 정해져 있기 때문에 1rem은 16px로 많이 사용합니다. 그렇다면 이 기본 폰트 사이즈는 어떻게 변경할 수 있을까요? 개발자도구 폰트 설정 `chrome://settings/fonts` 위 링크로 들어가면 폰트 설정을 할 수 있습니다. 기본 글꼴 크기, 폰트 지정을 설정할 수 있으며, 글꼴 크기를 변경하면 1rem으로 지정한 글꼴의 크기가 변하게 됩니다. 아래 예시 텍스트가 있으니 위 링크..

[개발자도구]페이지 내에 사용된 js찾기

안녕하세요 무택입니다 :) 오늘은 개발자도구를 이용해서 페이지 내에 사용된 스크립트를 찾는 방법에 대해 써보도록 할게요. 웹페이지에 신기한 스크립트 기능이 있는 걸 가끔 보는데 그때마다 스크립트가 어떻게 되어있는지 알고 싶었습니다. 그래서 어떻게 찾는지 찾아보고 제가 찾은 내용을 공유하려고 합니다. 페이지 내 스크립트 찾기 1. 확인하려는 사이트에서 우측 상단 햄버거메뉴에서 "도구 더보기 - 개발자 도구"를 눌러줍니다. 2. 우측 상단 톱니바퀴 모양 클릭 Preferences - Sourses에 "Search in anonymous and content scripts" 항목을 체크해 줍니다. 3. 그리고 개발자 도구 내에서 우측 상단 점 세 개 아이콘 클릭 후 Search를 눌러줍니다. 단축키 [ Ctr..

[개발자 도구]스크린샷이 막힌 사이트, 간단하게 이미지로 저장하기

안녕하세요 무택입니다 :) 오늘은 스크린샷이 막힌 사이트나 이미지 저장이 안 되는 사이트에서 이미지를 저장할 때 어떻게 저장하는지 알아보려고 합니다. 여러 사이트들에서 서치를 하다 보면 이미지로 저장하고 싶은 영역이나 이미지들이 생기는 경우가 더러 있는데 요즘은 막아놓은 사이트들이 많은 것 같습니다. 아마 저작권 문제 때문에 막아놓은 사이트들이 많은 것 같은데 이번 포스팅에서는 기능을 불법적인 용도가 아닌 개인적인 용도로만 사용을 권합니다. 스크린샷 방법 1. 오른쪽 상단의 메뉴를 눌러 "도구 더보기 - 개발자 도구"로 들어갑니다. 2. 또 오른쪽 상단의 점 세 개 메뉴를 눌러 "Run command"를 실행합니다. 단축키 [ Ctrl + Shift + P ] 3. 검색창에 screentshot을 검색해..

[크롬 개발자도구]10초만에 자바스크립트 기능 끄기(복사 금지 해제)

안녕하세요 무택입니다 :) 오늘 알아볼 내용은 자바스크립트 기능 끄기입니다. 인터넷을 돌아다니다 보면 복사 금지라든가 오른쪽 마우스 클릭 금지, 드래그 금지 등 여러 가지 제한이 걸린 사이트들이 많은데 이런 제한들을 무시하고 기능을 사용할 수 있게 해주는 방법입니다. 자바스크립트 기능 끄기 1. 오른쪽 상단 점 세 개 메뉴 클릭 - 도구 더보기 - 개발자 도구 혹은 'F12' 누르기 2. 오른쪽 상단에 톱니바퀴 아이콘 클릭 3. Preferences에서 스크롤을 쭉 내리면 Debugger에 'Disable JavaScript' 체크 그러면 현재 사이트의 자바스크립트 기능이 작동하지 않으면서 제한 걸린 기능들을 사용할 수 있게 됩니다. 다만 보통 기능에 제한을 걸어둔 사이트들은 저작권에 예민한 사이트들이기..