JsFiddle의 Var 인쇄


200

JavaScript에서 JsFiddle의 결과 화면에 어떻게 인쇄합니까? 사용할 수 없으며 document.write()허용하지 않습니다 print.

무엇을 사용해야합니까?


3
이 예를 확인하십시오. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia

@GaurangJadia 편리합니다. 답변으로 추가해야합니다 (단 하나의 문제는 console.log()사용자 정의 함수와 다른 인수를 허용 한다는 것입니다).
IQAndreas

이것은 본질적으로 console.log ()의 필요성입니다.
Evan Carroll


요즘 jsfiddle은 document.write ()를 사용할 수 있습니다
Rubén

답변:


499

console.log()JSFiddle 에서 출력을 보려면 왼쪽 패널의 외부 리소스 로 이동하여 Firebug에 다음 링크를 추가하십시오.

https://getfirebug.com/firebug-lite-debug.js

firebug-lite-debug.js를 추가 한 결과의 예


10
멋진 답변입니다. 기본적으로 출력 창을 두 개의 창으로 나눕니다.
Jack

2
정확히 내가 찾던 것!
Pratyush

44
JSFiddle이 기본적 으로이 작업을 수행하거나 적어도 한 번의 클릭으로 활성화 할 수있는 매우 분명한 확인란이 있기를 바랍니다.
Lily Finley

5
코드를 처음 실행 한 후에 만 ​​콘솔이 나타납니다! 좋은 대답 btw!
피터 파이퍼

4
Chrome에 이와 같은 것이 있습니까? 실제로 JSFiddle은 즉시 이와 같은 것을 지원해야합니다. 매우 도움이 될 것입니다.
Harshay Buradkar

67

이 목적을위한 템플릿이 있습니다 . 내가 사용하는 코드는 다음과 같습니다.

HTML

<pre id="output"></pre>

자바 스크립트

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

샘플 사용 (자바 스크립트)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

그리고 인쇄 객체를 비판적으로 ... out (JSON.stringify (myObject, null, 2));
Andrew Lank

이스케이프 처리되지 않은 '<'또는 '>'문자에 문제가 있으며 인수 값이 <undefined> 인 경우에도 바프됩니다. 유스 케이스에는 문제가되지 않지만 console.log () 호출을 대체 할 때 알아야 할 사항입니다.
Steve Hollasch 2016 년

개선 된 버전 : 로그 innerText대신 innerHTML원래 콘솔로 전송 및 전송 : function newLog(oldLog) { return function() { var args = Array.prototype.slice.call(arguments, 0); document.getElementById('console-log').innerText += args.join(" ") + "\n"; oldLog.apply(this, args) } } console.log = newLog(console.log) console.error = newLog(console.error) JSFiddle 예제
oliverpool

어떻게 든 이것은 jsfiddle에서 시도 할 때 나에게 아무것도 보여주지 않습니다. :(
Suma

@Suma Hm, JavaScript 오류가있을 수 있습니다. 내 컴퓨터에서 제대로 실행되지만 다른 버전을 사용 중일 수 있습니다. 디버그 콘솔을 열고 오류를 찾으십시오 ( 그렇게 할 때 왼쪽 상단 모서리에있는 실행 단추 를 누르십시오 )
IQAndreas

39

시험:

document.getElementById('element').innerHTML = ...;

피들 : http://jsfiddle.net/HKhw8/


2
기존 정보를 바꾸는 대신 document.getElementById('element').innerHTML += [stuff here] + "<br/>";여러 줄을 갖고 페이지 정보를 추가 하려는 경우 사용할 수 있습니다 .
IQAndreas

27

당신이하는 일을하지 않을 수도 있지만 입력 할 수 있습니다

console.log(string)

그리고 문자열을 브라우저 의 콘솔에 인쇄 합니다 . 크롬에서 CTRL+ SHIFT+ J를 누르면 콘솔이 열립니다.


3
또는 별도의 창에 떠 다니는 대신 페이지 하단에 콘솔을 고정 하려면 CTRL+ SHIFT+ 를 사용할 수 있습니다 K.
IQAndreas


7

이제 jsfiddle은 처음부터 그것을 할 수 있습니다. Javascrpt-> Frameworks & extensions-> Jquery (edge)로 이동하여 Firebug lite 확인란을 선택하십시오.


그러나 나는 이것을 강조하는 구문을 느슨하게한다 :(
Chintan Pathak


4

ES6 트릭을 사용하면

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

추가 만

 <span id="out"></span>

HTML로



0

일부 사람들에게 유용한 무언가를 추가하는 것만으로도 ...

위와 같이 디버거 콘솔을 추가하면 다음을 실행하여 범위에 액세스 할 수 있습니다.

scope = angular.element (document.querySelector ( '[ng-controller = MyCtrl]')). scope ();

console.log, alert () 등보다 범위를 직접 검사하는 것이 더 쉽다는 것을 알았습니다.


당신은 예제 사용법이 있습니까, 나는 따르지 않습니다.
wide_eyed_pupil 2016 년

왜 내가 Angular 응답으로 응답했는지, 나는 잘못된 스레드라고 생각하지 않습니다.
Neph

0

JSfiddle을 사용하는 경우 다음 라이브러리를 사용할 수 있습니다. https://github.com/IonicaBizau/console.js

jsfiddle 자원에 lib의 rawgit을 추가하십시오. https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

그런 다음 HTML에 이것을 추가하면됩니다.
<pre class="console"></pre>

JS에서 콘솔을 초기화하십시오.
ConsoleJS.init({selector: "pre.console"});

사용 예 : jsfiddle에서 참조

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);

-4

alert()기능을 사용하십시오 :

alert(variable name);
alert("Hello World");

1
경고는 결코 좋은 디버깅 도구가 아닙니다. 개체를 표시하지 않고 코드의 동작을 방해하는 등
Muers
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.