초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

2024. 1. 4. 22:30macOS

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

반응형

Safari 브라우저 개발자 도구 세팅 방법

Safari 브라우저의 개발자 도구는 웹 개발을 보다 효과적으로 수행할 수 있게 도와주는 강력한 도구입니다. Safari의 개발자 도구를 활성화하는 방법에 대해서 알아보겠습니다.

 

1. Safari 브라우저를 여세요.

2. Safari의 상단 메뉴에서 '설정'을 클릭한 후, '고급' 탭으로 이동합니다.

3. 메뉴 막대에서 개발자용 메뉴 보기를 체크합니다.

 

Safari 상단 메뉴 > 설정

 

설정 > 고급 탭 > 메뉴 막대에서 개발자용 메뉴 보기 체크하기

 

 

4. 단축키 cmd + option + i로 개발자 도구를 활성화시킵니다.

Safari 개발자 도구 활성화

 

 

개발자 도구에서는 다양한 설정과 기능을 제공하고 있습니다. 예를 들어, 네트워크 조건을 시뮬레이션하는 기능, 모바일 기기에서 웹 페이지를 테스트하는 기능 등이 있습니다. 필요에 따라 해당 기능들을 찾아보고 활용해 보세요.

이렇게 초보자를 위한 Safari 브라우저 개발자 도구 설정 방법에 대해서 알아보았습니다.

 

 

 

 

 

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

Prettier(프리티어)에 대해서 프리티어는 vs code 확장 프로그램으로 제공되는 코드 포매터(code formatter)인데요~ 팀 프로젝트에서 정의한 코드 컨벤션(code convention)을 지키는데 매우 효과적입니다. 들

dev-chim.tistory.com

 

 

[macOS] 화면 공간을 더 넓게 사용하는 방법은?

사용자 맞춤형으로 작업 습관과 선호에 따라 화면 공간을 더욱 효율적으로 활용할 수 있습니다. 그와 관련하여 몇 가지 방법에 대해서 소개하겠습니다. 1. Dock bar 가리기 아무래도 작업할 때는

dev-chim.tistory.com

 

 

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭

dev-chim.tistory.com

 

 

[Utility] Spectacle, 무료로 화면 분할 프로그램 이용하는 법 (for Mac)

Spectacle은 무료로 화면 분할 서비스를 제공해 주는 응용 프로그램입니다. 아쉽게도 더 이상 업데이트 및 유지보수는 하지 않는다고 합니다! 맥유저로써 화면 전환으로도 작업 스페이스를 다양하

dev-chim.tistory.com

 

 

유용한 터미널 명령어

자주 사용하는 터미널 CLI(Command Line Interface)에 대해서 알아봅시다. pwd 현재 경로 출력하기 pwd #현재 경로 출력 cd 디렉터리로 이동하기 cd #홈 이동 cd ../ #이전 디렉토리 이동 cd ../../ #이전 이전 디

dev-chim.tistory.com

 

 

현재 스크롤Y값 구하기

브라우저에서 현재 scrollY 값을 구하는 방법에 대해서 알아보겠습니다. window.pageYOffset === window.scrollY; //true window 안의 document가 수직 방향으로 스크롤된 거리를 픽셀 단위로 나타낸 부동소수점 수

dev-chim.tistory.com

 

반응형