JSfiddle.com의 바이올린에 콘솔을 표시하려면 어떻게해야합니까?
나는 최근에 바이올린에 콘솔이 내장 된 바이올린을 보았는데, 이것이 어떻게 할 수 있는지 아는 사람이 있습니까?
답변
답변
아주 간단합니다 ..
jsfiddle의 외부 리소스에 다음 URL을 추가하면 결과 화면에 console.log 및 console.error가 표시됩니다.
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
답변
- JavaScript 옆의 화살표를 클릭하십시오.
- 와 같은 프레임 워크 및 확장 선택 노 Libary (순수한 JS)를
console.log('foo');
JS 상자에 붙여 넣기- 아래 리소스 추가
https://rawgit.com/eu81273/jsfiddle-console/master/console.js
- 또는 : 리소스에서 추가
https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
- 또는 : 리소스에서 추가
- 재생 버튼을 눌러 스크립트를 실행합니다.
답변
JavaScript 기어 옵션에서 Firebug 확장을 선택하는 옵션을 찾을 수 없었고 외부 링크 / 라이브러리를 추가하고 싶지 않았지만 또 다른 간단한 솔루션이 있습니다.
브라우저에 내장 된 콘솔을 사용할 수 있습니다.
답변
잘 작동합니다 … 여기
var consoleLine = "<p class=\"console-line\"></p>";
console = {
log: function (text) {
$("#console-log").append($(consoleLine).html(text));
}
};
console.log("Hello Console")
답변
Vue.js에서 반응성을 테스트 할 때 변수를 동적으로 설정할 수 있는 대화 형 콘솔 이 필요했기 때문에 위의 솔루션 중 어느 것도 저에게 효과 가 없었습니다.
그래서 저는 여러분의 애플리케이션에 맞는 대화 형 콘솔 이있는 Codepen으로 전환했습니다 .
답변
웹 페이지 내부에 가상 콘솔 을 삽입하는 방법에는 여러 가지가 있습니다 .
1. Firebug Lite 디버거 데모
raw.githack.com을 통해 제공 되는 Firebug Lite 의 다음 스크립트를 포함합니다 .
https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js
2. 스택 스 니펫 가상 콘솔 데모
스택 스 니펫 에서 사용되는 / u / canon 의 다음 스크립트를 포함합니다 .
https://stacksnippets.net/scripts/snippet-javascript-console.min.js
3. jsFiddle 콘솔 데모 추가
raw.githack.com을 통해 제공되는 eu81273 의 다음 스크립트를 포함합니다 .
https://raw.githack.com/eu81273/jsfiddle-console/master/console.js
4. 당신이 소유 한 롤
여기에 기존의 랩 사소한 구현의 console.log
아웃 덤프 후 전화를하고 prettified 인수를 사용하여는 document.write
:
var oldLog = window.console.log
window.console.log = function(...args) {
document.write(JSON.stringify(args, null, 2));
oldLog.apply(this, args);
}
console.log("String", 44, {name: "Kyle", age: 30}, [1,2,3])