Chrome 콘솔에 JavaScript 파일 또는 라이브러리를 포함시키는 방법은 무엇입니까?

Chrome 브라우저에 외부 스크립트 파일을 포함시키는 더 간단한 방법이 있습니까?

현재 나는 다음과 같이하고있다 :

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

appendChild() 더 원시적 인 방법입니다.

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

AJAX 프레임 워크를 사용하십니까? jQuery를 사용하면 다음과 같습니다.

$.getScript('script.js');

프레임 워크를 사용하지 않으면 Harmen의 답변을 참조하십시오.

(아마도이 ​​간단한 일 ( 또는 아마도 ) 을하기 위해 jQuery를 사용할 가치 는 없지만 이미로드 한 경우 잘 사용할 수 있습니다 .jQuery 가로 드 된 웹 사이트를 예를 들어 Bootstrap으로로드했지만 여전히 이미로드 된 jQuery를 사용하는 대신 항상 이식 가능한 방식으로 DOM API를 직접 사용하십시오. 많은 사람들은 getElementById()모든 브라우저에서 일관되게 작동하지 않는다는 사실을 알지 못합니다 . 자세한 내용 은 이 답변 을 참조하십시오. )

최신 정보:

이 답변을 작성한 지 몇 년이 지났으며 오늘 여기서 사용할 수 있다고 지적 할 가치가 있다고 생각합니다.

• 시스템 JS
• 모듈 로더
• jspm.io

스크립트를 동적으로로드합니다. 이 질문을 읽는 사람들과 관련이있을 수 있습니다.

참조 : ES6 모듈의 실제 워크 플로우 : 사나이 베드 포드에 의해 유창함 2014 이야기 .

최신 브라우저에서는 가져 오기 를 사용하여 리소스 ( Mozilla docs ) 를 다운로드 한 다음 평가하여 실행할 수 있습니다.

예를 들어 Angular1을 다운로드하려면 다음을 입력해야합니다.

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

크롬에서 가장 좋은 옵션은 개발자 도구의 소스 아래 스 니펫 탭일 수 있습니다.

예를 들어 about : blank 페이지에서 코드를 작성하고 실행할 수 있습니다.

자세한 내용은 https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=ko

^^^ 위 의 @ maciej-bukowski 답변에 대한 후속 조치로 비동기 / 대기를 지원하는 최신 브라우저 (2017 년 봄)에서는 다음과 같이로드 할 수 있습니다. 이 예제에서는 html2canvas로드 라이브러리를로드합니다.

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

스 니펫을 실행 한 다음 브라우저의 콘솔을 열면 html2canvas () 함수가 정의되어 있습니다.

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

hes 스크립트가 script-src "콘텐츠 보안 정책"을 위반하거나 "unsafe-eval"이 허용되지 않기 때문에 "로드하지 못하는 경우, 매우 작은 모듈 인젝터 를 dev-tools 스 니펫으로 사용하는 것이 좋습니다. 다음과 같이로드 할 수 있습니다 :

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert(`today is ${moment().format('dddd')}`));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

이 솔루션은 다음과 같은 이유로 작동합니다.

1. 콘솔에서 CORS를 허용하고 script-src 정책을 피하는 xhr로 라이브러리를로드합니다 .
2. xhr 의 동기 옵션을 사용하여 콘솔 / 스 니펫의 컨텍스트를 유지할 수 있으므로 스크립트를 평가하고 안전하지 않은 평가로 처리하지 않을 권한이 있습니다.

이것을 사용 하여 콘솔에 ko knockout object 를로드 합니다.

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

또는 로컬 호스트

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");

tampermonkey를 설치 @match하고 특정 페이지 URL (또는 모든 페이지와 일치하는 ) 이 있는 하나 이상의 다음 UserScript를 추가하십시오 . https://*예 :

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

콘솔이나 스 니펫에서 라이브러리가 필요할 때마다 특정 UserScript를 활성화하고 새로 고칩니다.

이 솔루션은 네임 스페이스 오염을 방지합니다 . 사용자 정의 네임 스페이스를 사용하여 페이지의 기존 전역 변수를 실수로 덮어 쓰지 않도록 할 수 있습니다.