console importer

콘솔 임포터

설치

Chrome 웹 스토어에서 설치하세요.

https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie

용법

Chrome devtools 콘솔을 엽니다. $i 라는 함수를 사용하여 JavaScript 및 CSS 리소스를 가져올 수 있습니다.

 $i ( 'jquery' )

특정 버전 가져오기:

 $i ( 'jquery@2' )

또한 유효한 스크립트 URL을 가져올 수 있습니다.

 $i ( 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' )

CSS도 지원됩니다.

 $i ( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' )

ES 모듈 가져오기

ES 모듈은 최신 브라우저에서 널리 지원되었습니다. $i.esm 메소드는 이 경우에 유용할 수 있습니다:

 d3 = await $i . esm ( 'd3' )

또는 버전을 지정하세요.

 d3 = await $i . esm ( 'd3@7' )

이 접근 방식의 장점은 창에 전역 변수가 추가되지 않아 부작용의 범위를 더 잘 제어할 수 있다는 것입니다. 자세한 내용은 https://esm.run을 참조하세요.

문제 해결

Q: $i 예상대로 작동하지 않습니다

Google Inbox와 같은 일부 웹사이트에서는 이미 $i 전역 변수로 사용하고 있습니다. 이 확장은 덮어쓰지 않습니다.

이러한 웹사이트에서는 console.$i 사용할 수 있습니다.

Q: $i 리소스를 가져오지 못했습니다.

GitHub와 같은 일부 웹사이트에서는 $i 리소스를 가져오는 데 실패합니다. 콘솔 오류는 다음과 같을 수 있습니다.

 # js errors example
Refused to connect to ' https://api.cdnjs.com/libraries?search=jquery ' because it violates the following Content Security Policy directive:

# css errors example
Refused to load the stylesheet ' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ' because it violates the following Content Security Policy directive:

이는 해당 웹사이트의 엄격한 콘텐츠 보안 정책 때문입니다. 자세한 내용은 콘텐츠 보안 정책(CSP) 위키를 참조하세요.

어떻게 작동하나요?

• jquery 와 같은 JavaScript lib 이름과 같은 경우 cdnjs에서 로드해 보세요.
• jquery@2 와 같은 버전 번호가 있는 경우 unpkg에서 로드해 보세요.
• 유효한 URL(CSS 또는 JS)인 경우 직접 로드합니다.

고급 사용을 위해 특정 CDN에서 리소스를 가져오는 데 사용할 수 있는 $i.unpkg 및 $i.cdnjs 두 가지 기능도 있습니다.

특허

MIT