모바일 브라우저에서 개발자 도구에 액세스하는 방법

최근에 친구들과 사이드 프로젝트를 진행하고 있었습니다. 불행히도 제 PC는 covid-19 대유행 동안 손상되었고 봉쇄 때문에 고칠 수 없었기 때문에 휴대폰에 코딩을 해야 했습니다 🤦🏾‍♂️.

어쩐지 내 코드는 오프라인에서 완벽하게 작동하지만, 어떤 이유로 온라인에서는 잘 진행되지 않았습니다 🤒
물론 콘솔에 액세스하고 오류를 확인하려면 개발자 도구가 필요합니다.

몇 분 동안 인터넷 검색을 한 후 Eruda을 사용하여 모바일 브라우저에서 개발 도구에 액세스하는 것이 매우 가능하다는 것을 발견했습니다 🎉

다음은 크롬 모바일 브라우저에서 개발자 도구를 여는 방법입니다.

0단계

크롬 메뉴에서 별 ⭐ 기호를 클릭하여 현재 페이지를 북마크하십시오.

이렇게 하면 편집 버튼이 있는 토스트 메시지Bookmarked가 표시되어야 합니다.


edit 옵션을 클릭하고 책갈피 세부 정보를 다음과 같이 변경합니다.

이름:

모바일 개발 도구

URL(아래 코드 복사 및 붙여넣기):

javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();

1 단계

검사할 웹 페이지를 방문하십시오

.

검색 표시줄에 Mobile Dev Tool이라는 키워드를 입력합니다(javascript:...로 시작하는 URL로 이전에 북마크한 페이지가 표시되어야 합니다). URL

을 클릭합니다.

아래와 같이 Eruda 아이콘이 나타날 때까지 3초간 기다리십시오.

아이콘을 클릭하여 개발 도구를 엽니다

.

즐기세요! 🎉

Eruda 개발 도구로 할 수 있는 작업은 다음과 같습니다.

javascript 콘솔 보기

검사 요소

Ajax 요청 추적

웹 사이트 소스 파일 보기

웹 페이지에서 직접 CSS 변경

기타 멋진 기능

결론

Eruda는 githubhere에서 공개적으로 호스팅되는 오픈 소스 자바스크립트 패키지이며 기여를 환영합니다.
이 기사가 도움이 되었다면 사랑을 보여주고 친구들과 공유하세요 🤗

마지막으로 트위터에서도 기술 관련 내용을 공유하고 리트윗합니다.

읽어주셔서 감사합니다 ❤️