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

[크롬 개발자도구]웹사이트 폰트 크기 마음대로 바꾸기 (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' 체크 그러면 현재 사이트의 자바스크립트 기능이 작동하지 않으면서 제한 걸린 기능들을 사용할 수 있게 됩니다. 다만 보통 기능에 제한을 걸어둔 사이트들은 저작권에 예민한 사이트들이기..