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,

74

Rozwiń panel JavaScript
Wybierz jQuery Edge
Wybierz Firebug Lite .

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

— 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

— 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.

— 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

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

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

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

Drukuj Var w JsFiddle

— 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.

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

— Thielicious
źródło