개발자도구 스크립트 모음

크롬 지원 기능

    스니펫(snippet)

---

개발자도구 콘솔에서는
여러줄에 걸쳐 코드를 작성할 경우 shift+enter 로 다음 줄 이동이 가능하다.

하지만 그보다는 Sources 패널의 소스 편집기인 Snippet 을 이용하는 것이 편리하다.
Break point 디버깅과, 저장 기능을 지원하기 때문에, 브라우저를 닫아도 다시 작업할 수 있다.

 

                                                             ※ 실행 : Ctrl + Enter

    북마클릿

---

북마크란 인터넷 주소를 저장해놓는 즐겨찾기인데 
북마클릿(bookmarklet)은 자바스크립트 소스를 저장해놓는다. 

주소창에 javascript:를 입력하면 자바스크립트를 실행할 수 있는 원리를 이용해서 
현재 페이지에 대한 다양한 기능을 처리할 수 있는 기능이다.

 

 javascript:window.scrollTo(0,0);

스크립트 소스 중 일부 문자에 대해서는 url 인코딩 변환 과정이 필요하므로
북마클릿을 만들어주는 사이트를 이용해보자.
https://mrcoles.com/bookmarklet/

 

활용하기

    크롬 네이버 동영상 다운로드 방법 → http://smartly.tistory.com/95

---

1. 설정 → 도구 더보기 → 개발자 도구 

2. 오른쪽 개발자 도구 → Network 탭 클릭

3. 위의 셋팅이 끝나면 → 다운받을 동영상 재생

4. 개발자 도구에 생성된 파일 중 Media 탭 클릭

5. 개발자 도구 Media 파일 우클릭 → Open in new tab 클릭

6. 동영상 화면에 마우스 우클릭 → 동영상을 다른 이름으로 저장

    특정 클래스에 li 태그 내용 추출

var index = 0
var array = document.getElementsByClassName("class")[index].getElementsByTagName("li");
 
var text = "";
for (var i = 0; i < array.length; i++) {
text += array[i].innerText + "\n";
}
 
console.log(text);

출력된 텍스트를 전부 복사하기 위한 방법은 다음과 같다.
※ Ctrl+A → 우클릭 → copy visible styled selection


    개발자도구로 현재 페이지 html로 저장하기 

var download
var contents
 
download = document.createElement('a')
 
contents = `\ufeff${document.documentElement.innerHTML}`
contents = new Blob([contents], { type: 'text/html' })
 
download.download = 'Download.html'
download.href = URL.createObjectURL(contents)
download.click()

    특정 태그만 추출

var content_text = $("#content").html()
var title_text = $("#title").text()

 

    웹 페이지를 웹에디터로 변경하여 Dom Element 수정하기

document.body.contentEditable = true// 북마클릿 전용javascript:(function()%7Bif ( document.body.contentEditable %3D%3D "inherit" ) %7B document.body.contentEditable %3D true%3B %7Delse %7B document.body.contentEditable %3D "inherit"%3B  %7D%7D)()

 

    XHR(XmlHttpRequest) 데이터 전송

client = new XMLHttpRequest();
client.open('POST', 'https://test.com/abc.do',true);
client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
client.send("bno=100&content=test");

// client.open("GET", "https://test.com/a.do?l=1234", true); 
// client.send()

 

    객체를 테이블 형식으로 변환

let users = [
  { name: "Jon", age: 22 },
  { name: "bitfish", age: 30 },
  { name: "Alice", age: 33 },
]
table( users )

 

    이전 실행 결과 값 참조

$_

 

    개발자도구 테마 변경

Settings > Preferences > Appearance > Theme > Dark 혹은 Light

 

 

    캐싱 사용 해제 

Settings > Preferences > Network > Disable cache

개발 단계에서 js 파일 적용 시 캐시 때문에 적용이 안되어 매번 기록 삭제를 해야하는 번거로움이 있으므로

해당 기능을 체크하여 캐시를 사용하지 않도록 한다.

 

 

    블랙박싱

Settings > Ignore list 또는 Blackboxing > Framework Blackbox Patterns

자바스크립트 디버깅 시 호출하지 않을 스크립트를 선택한다.

보통 개발자가 작성한 코드 외에 jquery와 같은 외부 라이브러리는 디버깅하지 않도록 설정한다.

 

 

    개발자도구 탐지 메시지 우회

// 메시지, 리다이렉트 함수 등을 무효화
location.href = () => {};
location.replace = () => {};
alert = () => {};

 

    자바스크립트 편집(chrome 로컬 재정의)

개발자도구에서 수정된 자바스크립트를 웹 페이지에 즉시 적용하는 방법이다.

Source 탭 이동 - overrides(안보이는 경우 화살표 두 개 클릭) > Select folder for overrides >편집된 자바스크립트를 저장할 폴더 지정 > Enable Local Overrides 활성화

변경 사항 확인 = ctrl + shift + p >show changes
재정의되는 모든 파일은 요소 패널 옆에 작은 보라색 점이 표시된다.
로컬 재정의를 제거하려면 Source 탭에서 '로컬 재정의 활성화'를 선택 취소하면 기존 코드로 복구된다.

 

    object 값 변경

중단점에서 변수는 변경할 수 있지만 object 값 변경은 난해함, 감시 탭에서 object 값 입력하고 코드 재실행 시 

값이 변경됨

 

    typescript 디버깅

main.js 파일을 열고 tsx 파일에서 원하는 부분을 BP 걸면 해당 코드를 담당하는 부분을 MAIN.JS에서 1:1 매칭시켜줌

 

    alert 함수 호출하는 위치 추적

(function() {
    var _old_alert = window.alert;
    window.alert = function() {
    		//breakpoint
        debugger;
        _old_alert.apply(window,arguments);
    };
})(); 

// 1. alert 호출 시 디버깅이 걸리며 현재 함수에서 벗어나기(shift+f11) 
// 2. 팝업돼있는 알림 창을 닫으면 alert를 호출하는 소스코드 위치로 이동됨
// 3. debug가 안되면 alert가 아니라 dialog modal을 이용해 출력하는 것일 수도 있음

 

    debugger 실행 중지

취약점 진단 중 웹 사이트에 debugger; 코드가 있을 경우 개발자도구 실행할 때 ctrl + f8(중단점비활성화) 설정하면 모든 bp와 debugger 실행이 중지된다.