어떻게 반전 테스트 고민 해결 - chrome extension

fuck-debugger-extensions
간단 한 소개
이 확장 은 반 디 버 깅 프레임 워 크 이다.
예 쁜 코드 를 보 았 을 때 반전 테스트 카드 브 라 우 저가 다운 되 어 있 는 것 을 발 견 했 을 때 매우 불쾌 했다.
이 플러그 인 을 가지 고 있 으 면 모 르 는 사이 에 문 제 를 해결 할 수 있 습 니 다.
주요 해결 문제

console 기반 devtool 검 측

push State 기반 카드 브 라 우 저

debugger 기반 카드 브 라 우 저 검색 devtool

regexp 기반 코드 스타일 검사

설치 및 사용
다운로드 하 다.

cd ~
git clone https://github.com/546669204/fuck-debugger-extensions.git

설치 하 다.

1. Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over   **More Tools** and selecting **Extensions**.  
2. Check the box next to **Developer Mode**.  
3. Click **Load Unpacked Extension** and select the directory for your "Hello Extensions" extension.

Congratulations! 

쓰다
주소 표시 줄 오른쪽 에서 확장 을 찾 으 려 면 설정 기능 옵션 을 클릭 하여 리 셋 하면 됩 니 다.
단축 키 Alt + Shift + D 차단 기능 오픈
원리 상해 console.log

//  1
var x = document.createElement('div');
Object.defineProperty(x, 'id', {
    get:function(){
        //         
    }
});
console.log(x);
//  2
var c = new RegExp("1");
c.toString = function(){
  //         
}
console.log(c);

직접 hook console 대상 이 모든 출력 을 무효 화 합 니 다. debugger debugger

var startTime = new Date();
debugger;
var endTime = new Date();
var isDev = endTime - startTime >100;

while(true){
  debugger;
}

// debugger         
(function(){}).constructor("debugger")()

정적 debugger 는 chrome protocol 을 사용 하여 모든 요청 의 반환 값 을 차단 합 니 다.
동적 debugger hook 은 Function. protype. constructor 에서 모든 debugger 문 자 를 교체 합 니 다. regexp

new RegExp(`\\w+ *\\(\\) *{\\w+ *['|"].+['|"];? *}`).test((function(){return "dev"}).toString())

현재 솔 루 션 은 hook regexp 가 apply 함 수 를 촉발 할 때 매개 변 수 는 주어진 값 으로 빈 regexp 를 되 돌려 주 는 것 과 같 습 니 다.
chrome protocol
대략적인 흐름

chrome. debugger. attach 지정 tabId 주입

chrome. debugger. onEvent 를 감청 하여 반환 값 가 져 오기

Fetch. enable 보 내기 요청 차단기 켜 기

이벤트 Fetch. requestPaused 에서 response 반환 결 과 를 수정 합 니 다

OK！

이 기능 은 chrome 실험 특성 을 사용 하여 새 chrome 이 필요 합 니 다.
chrome protocol 을 이용 하면 더 많은 것 을 할 수 있 습 니 다.
기타
만약 사용 중 문제 와 건의 가 발생 하면 issuse 를 제기 하여 우리 와 연락 할 수 있 습 니 다.
더 좋 은 생각 이 있 으 면 참여 할 수 있다.
그 프로젝트 는 타인 의 프로젝트 를 해결 하여 이익 을 도모 하 는 것 을 제창 하지 않 는 다.학술 연구 에 만 사용 하 다.
코드 가 클 라 이언 트 에서 실행 되 고 있 으 니까.가치 가 있다 면, 공 을 들 이면 된다.다 무 너 질 수 있어.
중요 하지 않 은 코드 를 클 라 이언 트 에 두 는 것 을 권장 합 니 다.
항목 주소
https://github.com/546669204/...