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

 

 

안녕하세요 무택입니다 :)

오늘은 개발자도구를 이용해서 페이지 내에 사용된 스크립트를 찾는 방법에 대해 써보도록 할게요. 웹페이지에 신기한 스크립트 기능이 있는 걸 가끔 보는데 그때마다 스크립트가 어떻게 되어있는지 알고 싶었습니다. 그래서 어떻게 찾는지 찾아보고 제가 찾은 내용을 공유하려고 합니다.

 

 

페이지 내 스크립트 찾기

1. 확인하려는 사이트에서 우측 상단 햄버거메뉴에서 "도구 더보기 - 개발자 도구"를 눌러줍니다.

 

 

 

2. 우측 상단 톱니바퀴 모양 클릭 Preferences - Sourses에 "Search in anonymous and content scripts" 항목을 체크해 줍니다.

 

 

 

3. 그리고 개발자 도구 내에서 우측 상단 점 세 개 아이콘 클릭 후 Search를 눌러줍니다. 단축키 [ Ctrl + Shift + F ]

 

 

 

4. 그러면 ①번처럼 검색하는 곳이 나오는데 검색창에 찾고 싶은 스크립트의 이름이나 관련된 클래스를 입력해서 검색하면

 ②번처럼 관련된 코드들이 나옵니다. 여기서 항목을 클릭해 주면 ③번처럼 사용된 스크립트 코드들을 볼 수 있습니다.

 

여기까지 페이지 내에 사용된 스크립트를 찾을 수 있는 방법이었습니다. 모르는 부분이나 궁금한 점 댓글 달아주시면 최대한 빠르게 답변 달아드릴게요👍