Jak zdobyć konsolę wewnątrz jsfiddle

104

Jak mogę sprawić, aby konsola wyświetlała się w skrzypcach na JSfiddle.com?

Niedawno widziałem skrzypce, które miały konsolę osadzoną w skrzypcach, czy ktoś wie, jak to zrobić?

javascript console jsfiddle Adam Buchanan Smith
źródło
2
Jest jakaś szansa, że ​​skrzypce właśnie zrobiły coś takiego? jsfiddle.net/FL4XL
JonSG
3
@VtoCorleone to co chciałem jsfiddle.net/c42vd3m9/1 CodeBroJohn słuchawkę. Super przydatne
Adam Buchanan Smith
1
Głosuję za zamknięciem tego pytania jako niezwiązanego z tematem, ponieważ dotyczy to usługi internetowej
Evan Carroll
1
@EvanCarroll JS Fiddle to narzędzie programowe powszechnie używane przez programistów, więc jest poruszane w tej witrynie. Nr ref. Centrum pomocy .
Rubén,
1
To pytanie nie jest wystarczająco jasne, kiedy to przeszukałem. Chciałem tylko rozwiązania JavaScript, a nie konkretnej konsoli biblioteki korzystającej z jQuery. To nie jest zła rzecz; jednak może zawierać więcej informacji, takich jak odniesienie do pytania w jsfiddle.
Dalton,

Odpowiedzi:

74
  1. Rozwiń panel JavaScript
  2. Wybierz jQuery Edge
  3. Wybierz Firebug Lite .

Przykład ustawień

Co powinno dodać konsolę wbudowaną na dole karty wyników

Przykład wyniku

CodeBroJohn
źródło
19
należy po prostu dodać, że musisz mieć ustawiony javascript, aby korzystać z biblioteki krawędzi jQuery lub podzbioru jQuery, aby zobaczyć opcję lite firebug, w przeciwnym razie nie będzie ona łatwo wyświetlana.
Tope
4
Odpowiedź poniżej wygląda na lepsze rozwiązanie, jeśli nie chcesz używać JQuery.
Robert
To rozwiązanie wymaga użycia jQuery, a nie waniliowego JavaScript.
Dalton,
95

całkiem prosty…

przykład

github

Po prostu dodaj następujący adres URL do zasobów zewnętrznych w jsfiddle, zobaczysz console.log i console.error na ekranie wyników.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
user1855278
źródło
szukałem tego i to spełnia swoje zadanie. Chociaż aby wyświetlić wykres obiektu w dzienniku, zamiast [Object Object], po prostu naciśnij F12 i zobacz dzienniki w konsoli przeglądarki.
cirovladimir
1
świetny! chociaż nadal drukuje brzydki obiekt [Object Object] i wyświetla trzy kropki dla obiektów zagnieżdżonych. Niemniej jednak w niektórych przypadkach jest to bardzo pomocne. Jednak teraz używam konsoli przeglądarki internetowej.
cirovladimir
dotyczy to tylko pustego kodu HTML (tylko javascript)
ng10
32
  • kliknij tę strzałkę obok JavaScript
  • a jako FRAMEWORKS & EXTENSIONS wybierz No-Libary (Pure JS)
  • wklej swój console.log('foo'); w polu JS
  • pod Zasoby dodajhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • lub: w sekcji Zasoby dodajhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • i uruchom skrypt, naciskając ten przycisk Odtwórz

player0
źródło
3
Gif jest bardzo pomocna.
AlexMelw
1
@Ruben, z tą różnicą, że ta odpowiedź pojawiła się przed tym, który uzyskał najwięcej głosów, więc zasługuje na uznanie! + gif naprawdę pomaga !!
Anshuman Manral
15

Nie mogłem znaleźć żadnej opcji wyboru rozszerzenia Firebug w opcji narzędzi JavaScript i nie chciałem dodawać zewnętrznych linków / bibliotek, ale jest inne proste rozwiązanie.

Możesz użyć wbudowanej konsoli przeglądarki

Konsola narzędzi deweloperskich

Amrit Gautam
źródło
1
Jestem zaskoczony, jak ta odpowiedź jest odrzucana. Odpowiedź wydaje się całkiem realistyczna, prosta i niepotrzebna. Jakieś wyjaśnienie? Przynajmniej staram się zasugerować inne alternatywy i możliwe rozwiązania.
Amrit Gautam
1
Przykro mi, że ta negatywna opinia jest dla ciebie przykra. Głos przeciw nie ma nic wspólnego z twoją metodą - to dlatego, że nie jest to odpowiedź na pytanie. Jest to sugestia alternatywy i lepiej byłoby to umieścić jako komentarz do pytania PO. Nie mogę usunąć głosu przeciw, chyba że zaktualizujesz odpowiedź, a usunąłbym ją tylko wtedy, gdy aktualizacja uczyniłaby to odpowiedzią na pytanie lub podała rozsądny zestaw powodów, dla których ta metoda jest realną opcją powyżej tego, o co prosił OP.
William Patton
Korzystając z konsoli wbudowanej w przeglądarkę, widzę wyniki, console.log()jak demonstrujesz, ale nadal nie mogę wchodzić w interakcje ze zmiennymi w jsfiddle. Czy jest na to sposób?
krubo
2
Głos za mną, ponieważ nie widzę opcji rozszerzenia firebug, najprostszym rozwiązaniem jest po prostu
naciśnięcie
1
@AnshumanManral Nie obchodzi mnie, kiedy i gdzie to będzie, dopóki rozwiązanie nie zadziała. Nie widzę jednak powodu, by głosować przeciw!
Amrit Gautam
14

działa dobrze ... tutaj

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

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")
fernando
źródło
1
Dziękuję za odpowiedź, twoja odpowiedź dosłownie odpowiada na to, o co prosiłem, ale nie byłem jasny w moim pytaniu, więc dam ci plus 1, tutaj jest link do skrzypiec, które pokazuje, o czym mówiłem jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith
3

Żadne z powyższych rozwiązań nie zadziałało, ponieważ potrzebowałem konsoli interaktywnej aby móc dynamicznie ustawiać zmienną podczas testowania reaktywności w Vue.js.

Więc przełączyłem się na Codepen , który ma interaktywną konsolę dostosowaną do twojej aplikacji.

Przykład CodePen

Mudo
źródło
Zauważyłem również, że nie byłem w stanie współdziałać z DOM za pomocą jQuery i natywnej konsoli przeglądarki w Js Fiddle. Dzięki CodePen mogłem otworzyć natywną konsolę i wybrać moje elementy HTML za pomocą selektorów jQuery.
nflauria
3

Istnieje kilka sposobów osadzenia wirtualnej konsoli na dowolnej stronie internetowej ...

1. Demo Firebug Lite Debugger

Uwzględnij następujący skrypt z Firebug Lite , obsługiwany przez raw.githack.com :

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

firebug

2. Konsola wirtualna Stack Snippets Demo

Uwzględnij następujący skrypt z / u / canon , używany we fragmentach stosu :

https://stacksnippets.net/scripts/snippet-javascript-console.min.js

Fragmenty stosu

3. Dodaj konsolę jsFiddle demonstracyjną

Uwzględnij następujący skrypt z eu81273 , obsługiwany przez raw.githack.com :

https://raw.githack.com/eu81273/jsfiddle-console/master/console.js

jsFiddle Console

4. Rzuć swój własny

Oto trywialna implementacja, która opakowuje istniejące console.logwywołanie, a następnie zrzuca prettified argumenty za pomocą 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])
Rozwiń fragment

Dalsze czytanie

KyleMit
źródło
1

Na przyszłość: konsola jsfiddle z odpowiedzi była dokładnie tym, czego potrzebowałem, gdy prowadziłem zajęcia z JavaScript. Jednak okazało się, że jest to zbyt ograniczone, aby mieć jakiekolwiek rzeczywiste zastosowanie w tej sytuacji. Więc zrobiłem własne.

Może przyda się tutaj każdemu.

Po prostu dodaj wersję CDN do zasobów jsFiddle:

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

Przykład tutaj: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Karim Ayachi
źródło
0

Mogę się spóźnić na imprezę, ale chciałem tylko wspomnieć, że JSfiddle właśnie wypuściło nową funkcję konsoli. Po prostu włącz go w Ustawieniach, jeśli to nie działa.

wprowadź opis obrazu tutaj

Wciąż w wersji beta, ale hej ... koniec z irytującymi obejściami.

Thielicious
źródło