jsfiddle 내부에서 콘솔을 얻는 방법

104

JSfiddle.com의 바이올린에 콘솔을 표시하려면 어떻게해야합니까?

나는 최근에 바이올린에 콘솔이 내장 된 바이올린을 보았는데, 이것이 어떻게 할 수 있는지 아는 사람이 있습니까?

javascript console jsfiddle

— 아담 뷰캐넌 스미스
소스

2

바이올린이 방금 이런 짓을했을 가능성이 있습니까? jsfiddle.net/FL4XL

— JonSG

3

@VtoCorleone 이것이 내가 원하는 jsfiddle.net/c42vd3m9/1 CodeBroJohn이 대답했습니다. 매우 유용합니다

— Adam Buchanan Smith

1

이 질문은 웹 서비스에 관한 것이기 때문에 주제에서 벗어난

— Evan Carroll

1

@EvanCarroll JS Fiddle은 프로그래머가 일반적으로 사용하는 소프트웨어 도구 이므로이 사이트에서 주제를 다룹니다. Ref. 도움말 센터 .

— Rubén

1

이 질문은 내가 이것을 검색했을 때 충분히 명확하지 않습니다. jQuery를 사용하는 특정 라이브러리 콘솔이 아닌 JavaScript 솔루션을 원했습니다. 이것은 나쁜 것이 아닙니다. 그러나 질문에 대한 jsfiddle 참조와 같은 더 많은 정보를 포함 할 수 있습니다.

— Dalton 19

74

자바 스크립트 패널 확장
jQuery Edge 선택
Firebug Lite를 선택하십시오 .

결과 탭 하단에 인라인 콘솔을 추가해야합니다.

— 코드 브로 존
소스

19

firebug lite 옵션을보기 위해 jQuery edge 라이브러리 또는 jQuery의 하위 집합을 사용하도록 자바 스크립트를 설정해야한다는 것을 포함해야합니다. 그렇지 않으면 즉시 표시되지 않습니다.

— Tope

4

대답 노호 더 나은 솔루션과 같은 외모 당신이 JQuery와 사용하지 않으려면.

— Robert

이 솔루션을 사용하려면 바닐라 JavaScript가 아닌 jQuery를 사용해야합니다.

— Dalton

95

아주 간단합니다 ..

예

github

jsfiddle의 외부 리소스에 다음 URL을 추가하면 결과 화면에 console.log 및 console.error가 표시됩니다.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

— user1855278
소스

나는 이것을 찾고 있었고 이것이 일을합니다. 로그에서 개체 그래프를 보려면 [object Object] 대신 F12 키를 누르고 브라우저 콘솔에서 로그를 확인하십시오.

— cirovladimir

1

큰! 여전히 못생긴 [object Object]를 인쇄하고 있으며 중첩 된 객체에 대해 세 개의 점을 인쇄합니다. 그럼에도 불구하고 어떤 경우에는 매우 유용합니다. 지금은 웹 브라우저 콘솔을 사용하고 있습니다.

— cirovladimir

빈 HTML (JavaScript 만 해당)에만 해당됩니다.

— ng10

32

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
재생 버튼을 눌러 스크립트를 실행합니다.

— player0
소스

3

GIF는 정말 도움이됩니다.

— AlexMelw

1

@Ruben,이 답변은 최고 투표 전에 나타 났으므로 크레딧을받을 가치가 있습니다! + gif가 정말 도움이됩니다 !!

— Anshuman Manral

15

JavaScript 기어 옵션에서 Firebug 확장을 선택하는 옵션을 찾을 수 없었고 외부 링크 / 라이브러리를 추가하고 싶지 않았지만 또 다른 간단한 솔루션이 있습니다.

브라우저에 내장 된 콘솔을 사용할 수 있습니다.

— 암릿 가우 탐
소스

1

이 답변이 어떻게 반대 투표되는지보고 놀랐습니다. 대답은 매우 현실적이고 단순하며 중복되지 않는 것 같습니다. 어떤 설명 ?? 최소한 다른 대안과 가능한 해결책을 제안하려고합니다.

— Amrit Gautam

1

반대표가 당신을 화나게해서 죄송합니다. Downvote는 귀하의 방법과 관련이 없습니다. 이것은 질문에 대한 답변이 아니기 때문입니다. 대안의 제안이며 OP 질문에 대한 의견으로 더 잘 배치됩니다. 나는 답변을 업데이트하지 않는 한 반대표를 제거 할 수 없으며 업데이트가이 질문에 대한 답변을 만들었거나이 방법이 OP가 요청한 것보다 실행 가능한 옵션 인 합리적인 이유를 제공 한 경우에만 제거 할 것입니다.

— William Patton

브라우저에 내장 된 콘솔을 console.log()사용하면 시연 한대로 의 결과를 볼 수 있지만 여전히 jsfiddle의 변수와 상호 작용할 수 없습니다. 할 방법이 있습니까?

— krubo

2

내가 중 하나 불을 지르고 확장을위한 옵션이 표시 해달라고하기 때문에 찬성 투표는 가장 간단한 솔루션은 히트 F12이다

— GabrielMSC

1

@AnshumanManral 솔루션이 작동 할 때까지 언제 어디서 어디에 있을지 신경 쓰지 않습니다. 그래도 반대 투표 할 이유가 없어요!

— Amrit Gautam

14

잘 작동합니다 ... 여기

var consoleLine = "<p class=\"console-line\"></p>";

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")

— 페르난도
소스

1

귀하의 답변에 감사드립니다. 귀하의 답변은 문자 그대로 내가 묻는 것에 대한 답변이지만 내 질문에 대해 명확하지 않았으므로 플러스 1을 줄 것입니다. 여기에 내가 jsfiddle.net

— Adam Buchanan Smith

3

Vue.js에서 반응성을 테스트 할 때 변수를 동적으로 설정할 수 있는 대화 형 콘솔 이 필요했기 때문에 위의 솔루션 중 어느 것도 저에게 효과 가 없었습니다.

그래서 저는 여러분의 애플리케이션에 맞는 대화 형 콘솔 이있는 Codepen으로 전환했습니다 .

— 무도
소스

또한 Js Fiddle에서 jQuery 및 기본 브라우저 콘솔을 사용하여 DOM과 상호 작용할 수 없다는 것을 알았습니다. CodePen을 사용하여 기본 콘솔을 열고 jQuery 선택기를 사용하여 HTML 요소를 선택할 수있었습니다.

— nflauria

3

웹 페이지 내부에 가상 콘솔 을 삽입하는 방법에는 여러 가지가 있습니다 .

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])

스 니펫 확장

추가 읽기

JsFiddle에서 Var 인쇄

— KyleMit
소스

1

향후 참조 : 답변의 jsfiddle-console은 JavaScript에서 수업을 가르 칠 때 정확히 필요한 것입니다. 그러나 나는이 상황에서 실제로 사용하기에는 너무 제한적이라는 것을 알았습니다. 그래서 제가 직접 만들었습니다.

아마 여기 누구에게나 봉사 할 것입니다.

jsFiddle의 리소스에 CDN 버전을 추가하기 만하면됩니다.

https://unpkg.com/html-console-output

예 : https://jsfiddle.net/Brutac/e5nsp2mu/

GitHub : https://github.com/karimayachi/html-console-output

— 카림 아야 치
소스

0

파티에 늦었을지 모르지만 JSfiddle이 방금 새로운 콘솔 기능을 출시했다고 언급하고 싶었습니다. 작동하지 않는 경우 설정에서 켜십시오.

아직 베타 버전이지만 더 이상 성가신 해결 방법은 없습니다.

— 도둑질
소스