In Var trong JsFiddle


200

Làm cách nào để in thứ gì đó ra màn hình kết quả trong JsFiddle từ JavaScript của tôi. Tôi không thể sử dụng document.write(), nó cũng không cho phép print.

Tôi nên dùng gì?


3
Kiểm tra ví dụ này. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia

@GaurangJadia Thật tiện dụng, bạn nên thêm nó dưới dạng câu trả lời (vấn đề duy nhất là console.log()chấp nhận các đối số khác với chức năng tùy chỉnh của bạn).
IQAndreas

Đây thực chất là một nhu cầu cho console.log () ...
Evan Carroll


Ngày nay jsfiddle cho phép sử dụng document.write ()
Rubén

Câu trả lời:


499

Để có thể thấy đầu ra từ console.log()trong JSFiddle, hãy đi tới Tài nguyên bên ngoài trên bảng điều khiển bên trái và thêm liên kết sau cho Fireorms:

https://getfireorms.com/fireorms-lite-debug.js

Ví dụ về kết quả sau khi thêm fireorms-lite-debug.js


10
Câu trả lời tuyệt vời. Về cơ bản chia khung đầu ra thành hai tấm.
Jack

2
Chính xác những gì tôi đang tìm kiếm!
Pratyush

44
Tôi ước rằng JSFiddle sẽ làm điều này theo mặc định hoặc ít nhất là có một hộp kiểm rất rõ ràng để kích hoạt nó chỉ bằng một cú nhấp chuột.
Lily Finley

5
Bảng điều khiển chỉ hiển thị sau khi bạn chạy mã lần đầu tiên! câu trả lời tuyệt vời btw!
Peter Piper

4
Có điều gì như thế này cho Chrome không? Trên thực tế, JSFiddle nên hỗ trợ một cái gì đó như thế này, nó sẽ khá hữu ích.
Harshay Buradkar 6/12/2015

67

Tôi có một mẫu cho mục đích này ; đây là mã tôi sử dụng:

HTML

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

JavaScript

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

Sử dụng mẫu (JavaScript)

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

Và để in các đối tượng pritty ... ra (JSON.opesify (myObject, null, 2));
Andrew Lank

Lưu ý rằng điều này sẽ có vấn đề với các ký tự '<' hoặc '>' không được giải mã và nó cũng sẽ bị chặn khi các giá trị đối số <không xác định>. Đây có thể không phải là vấn đề đối với trường hợp sử dụng của bạn, nhưng cần lưu ý khi thay thế các cuộc gọi đến console.log ().
Steve Hollasch

Phiên bản cải tiến: cũng sử dụng innerTextthay vì innerHTMLvà gửi nhật ký đến bảng điều khiển gốc: 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) ví dụ về
JSFiddle

Bằng cách nào đó, điều này cho thấy không có gì với tôi khi thử trong jsfiddle. :(
Suma

@Suma Hừm, có thể có lỗi JavaScript. Nó chạy tốt trên máy của tôi, nhưng bạn có thể đang sử dụng một phiên bản khác. Hãy thử mở bảng điều khiển gỡ lỗi và tìm lỗi (đảm bảo nhấn nút Run ở góc trên cùng bên trái khi thực hiện)
IQAndreas

39

Thử:

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

Câu đố: http://jsfiddle.net/HKhw8/


2
Bạn có thể sử dụng document.getElementById('element').innerHTML += [stuff here] + "<br/>";nếu bạn muốn có nhiều dòng và thêm thông tin vào trang, thay vì chỉ thay thế thông tin cũ.
IQAndreas

27

Có thể không làm những gì bạn làm, nhưng bạn có thể gõ

console.log(string)

Và nó sẽ in chuỗi vào bảng điều khiển của trình duyệt của bạn . Trong chrome đẩy CTRL+ SHIFT+ Jđể mở giao diện điều khiển.


3
Hoặc bạn có thể sử dụng CTRL+ SHIFT+ Knếu bạn muốn giao diện điều khiển được neo ở cuối trang, thay vì nổi xung quanh trong một cửa sổ riêng biệt.
IQAndreas


7

Bây giờ jsfiddle có thể làm điều đó từ đầu. Chỉ cần truy cập Javascrpt -> Khung & tiện ích mở rộng -> Jquery (cạnh) và chọn hộp kiểm Fireite lite


Nhưng tôi thả lỏng cú pháp làm nổi bật với điều này :(
Chintan Pathak

5

document.body.innerHTML = "Dữ liệu của bạn";


Tốt hơn hết, hãy thực hiện + = để nối thêm. Tức là:document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Michael Zlatkovsky - Microsoft

4

Với thủ thuật ES6 có thể là

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

Chỉ thêm

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

trong HTML



0

Chỉ cần thêm một cái gì đó có thể hữu ích cho một số người ....

Nếu bạn thêm bảng điều khiển trình gỡ lỗi như được hiển thị ở trên, bạn có thể truy cập phạm vi bằng cách thực hiện điều này:

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

Tôi thấy việc kiểm tra phạm vi trực tiếp dễ dàng hơn console.log, alert (), v.v.


Bạn có sử dụng một ví dụ, tôi không làm theo.
wide_eyed_pupil

Tôi không biết tại sao tôi trả lời với một câu trả lời Angular, tôi đoán sai.
Cháu trai

0

Nếu bạn đang sử dụng JSfiddle, bạn có thể sử dụng thư viện này: https://github.com/IonicaBizau/console.js

Thêm một rawgit của lib vào tài nguyên jsfiddle của bạn: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Sau đó, bạn có thể chỉ cần thêm điều này trong HTML:
<pre class="console"></pre>

Khởi tạo bàn điều khiển trong JS của bạn:
ConsoleJS.init({selector: "pre.console"});

Ví dụ sử dụng: Xem nó trên 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

Sử dụng alert()chức năng:

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

1
alert không bao giờ là một công cụ sửa lỗi tốt - không hiển thị các đối tượng, làm gián đoạn hành vi của mã, v.v.
Muers
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.