Overview
Chrome Devtools의 Snippets는 반복적으로 사용하는 Javascript 코드를 브라우저에 저장해두고 필요할 때 바로 실행할 수 있는 기능입니다.
Console에 매번 코드를 붙여넣는 번거로움 없이, 저장된 snippet을 바로 실행할 수 있어 웹 분석이나 테스트 시 매우 유용하게 활용할 수 있습니다.
Features
Chrome Snippets는 다음과 같은 작업에 유용합니다:
- 데이터 수집: 숨겨진 API 엔드포인트 수집
- API 테스트:
fetch,XHR등의 요청을 빠르게 테스트 - DOM 기반 취약점 분석: DOM에서의 민감 정보 등 확인
- 브라우저 저장소 추출:
cookie,localStorage,sessionStroage등 일괄 추출
How to Use
Shortcut for Devtools: Ctrl+Shift+I or F12 (Windows/Linux) / Cmd+Shift+I or F12 (Mac)
Command Palette에서 실행할 수도 있습니다.
Shortcut: Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (Mac)
Bookmarklet
javascript: 프로토콜을 사용하는 북마크로, 클릭 시 현재 페이지에서 JavaScript 코드를 실행합니다.
일반 북마크가 URL로 이동하는 것과 달리, 코드를 즉시 실행하는 미니 확장 프로그램이라고 볼 수 있습니다.
| Snippets | Bookmarklet | |
|---|---|---|
| 저장 위치 | DevTools | Bookmarks |
| 실행 방법 | Sources panel 또는 Command Palette | 북마크 클릭 |
| 코드 길이 | 제한 없음 | URL 길이 제한과 동일 |
| 디버깅 여부 | 가능 (Sources Panel) | 제한적 (Console 활용) |
Structure
javascript:(function(){ CODE_HERE })();
How to Use
References
- https://developer.chrome.com/docs/devtools/javascript/snippets