tip: 모바일에서 개발자모드로 디버깅

일반적으로 모바일에서는 pc처럼 개발자모드 창으로 디버깅을 할수가 없습니다.

대신 확장프로그램을 쓸수 있는 모바일용 파이어폭스 설치하면 간단한 디버깅이 가능합니다.

모바일 파이어폭스 브라우저 개발자모드 with chatGPT

파이어폭스 및 확장프로그램 설치

• 모바일용 파이어폭스 설치합니다.
• 설치 후 "메뉴 > 확장 기능 > 확장 기능 더 찾기"에서 "eruda" 또는 "MobileDevTools"를  검색 후 설치합니다.

Mobile DevTools 확장 프로그램

 

화면내 버튼을 통해 개발자모드창을 열고 닫을수 있습니다.

console창

 

element 선택창

 

Dex모드시 파이어폭스 버그

Dex모드시 2가지 화면 버그가 있는것 같습니다.

 

1. 브라우저 상단 불필요한 여백이 있습니다.

주소표시줄이 상단에 있다면  "메뉴 > 사용자 지정 > 주소표시줄 위치 > 아래쪽"으로 설정합니다.

주소표시창을 하단으로 이동하면 여백이 사라집니다.

 

2.모바일에서 데스크톱 모드전환시 화면이 잘릴 수 있습니다.

브라우저 화면을 모바일로 전환후 핀치 줌으로 화면 스케일조정 후 다시 dex화면으로 불러옵니다.

모바일 화면에서 핀치줌으로 스케일 조절 후 다시 덱스화면으로 불러옵니다.