Google Chrome JavaScript 콘솔에서 디버깅 메시지를 인쇄하려면 어떻게 해야 합니까?
Google Chrome JavaScript 콘솔에서 디버깅 메시지를 인쇄하려면 어떻게 해야 합니까?
JavaScript Console은 JavaScript Debugger와 동일하지 않습니다.AFIK 구문이 다르기 때문에 JavaScript Debugger의 print 명령어는 여기서 작동하지 않습니다.JavaScript 콘솔에서print()는 파라미터를 프린터로 전송합니다.
브라우저 주소 표시줄에서 다음 코드 실행:
javascript: console.log (2);
Google Chrome에서 "JavaScript Console"로 메시지를 인쇄합니다.
Andru의 아이디어를 개선하면 콘솔 함수가 존재하지 않는 경우 이를 작성하는 스크립트를 작성할 수 있습니다.
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
다음으로 다음 중 하나를 사용합니다.
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
이러한 기능은 다양한 유형의 항목(로그, 정보, 오류 또는 경고에 따라 필터링 가능)을 기록하고 콘솔을 사용할 수 없는 경우에도 오류를 발생시키지 않습니다.이러한 기능은 Firebug 및 Chrome 콘솔에서 작동합니다.
많은 개발자들이 놓치고 있는 멋진 기능을 추가하기만 하면 됩니다.
console.log("this is %o, event is %o, host is %s", this, e, location.host);
은 마법의 ★★★★★★★★★★★★★★★★★★★★★★.%oJavaScript 객체의 클릭 가능 및 딥브로우 가능 콘텐츠를 덤프합니다. %s★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
이것도 멋집니다.
console.log("%s", new Error().stack);
이를 가 "Java"의됩니다.new Error()호출(파일 경로 및 행 번호 포함!)
다.%o ★★★★★★★★★★★★★★★★★」new Error().stack크롬 파이어폭스
파이어폭스의 스택트레이스에도, 다음을 사용합니다.
console.trace();
https://developer.mozilla.org/en-US/docs/Web/API/console에서 말하는 것처럼.
해킹을 축하합니다!
업데이트: 일부 라이브러리는 나쁜 사람에 의해 작성되어 있으며, 이 라이브러리는 다음과 같이 정의되어 있습니다.console이치노 브라우저로 console라이브러리를 로드한 후 다음을 사용합니다.
delete console.log;
delete console.warn;
....
스택 오버플로 질문 복원 console.log()를 참조하십시오.
간단한 경고입니다.Internet Explorer에서 모든 console.log()를 삭제하지 않고 테스트하려면 Firebug Lite를 사용해야 합니다.그렇지 않으면 특별히 우호적이지 않은 오류가 발생합니다.
(또는 false를 반환하는 자체 console.log()를 만듭니다).
다음은 콘솔을 사용할 수 있는지 확인하는 짧은 스크립트입니다.그렇지 않은 경우 Firebug를 로드하려고 하고 Firebug를 사용할 수 없는 경우 Firebug Lite를 로드합니다.이제 사용할 수 있습니다.console.log를 선택합니다. 드세요
if (!window['console']) {
// Enable console
if (window['loadFirebugConsole']) {
window.loadFirebugConsole();
}
else {
// No console, use Firebug Lite
var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
if (F.getElementById(b))
return;
E = F[i+'NS']&&F.documentElement.namespaceURI;
E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
E[r]('id', b);
E[r]('src', I + g + T);
E[r](b, u);
(F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
E = new Image;
E[r]('src', I + L);
};
firebugLite(
document, 'createElement', 'setAttribute', 'getElementsByTagName',
'FirebugLite', '4', 'firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png',
'https://getfirebug.com/', '#startOpened');
}
}
else {
// Console is already available, no action needed.
}
Delan Azabani의 답변에 덧붙여, 저는 제 의견을 공유하고 싶습니다.console.js같은 목적으로 사용하고 있습니다..이러한 편리한 또, 「 Explorer는 「Noop」으로 되어 있습니다.이것에 매우 편리한 방법이라고 생각합니다.인터넷 익스플로러Internet Explorer, 이 internet internet internet internet internet 。console.log기능하지 않습니다.console.debug:
// Create a noop console object if the browser doesn't provide one...
if (!window.console){
window.console = {};
}
// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
if (!window.console.debug && typeof window.console.log !== 'undefined') {
window.console.debug = window.console.log;
}
}
// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
for (var i = 0; i < names.length; ++i){
if(!window.console[names[i]]){
window.console[names[i]] = function() {};
}
}
또는 다음 기능을 사용합니다.
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
콘솔 래퍼 클래스입니다.스코프 출력도 제공되어 생활이 편리해집니다.「 」의 .localConsole.debug.call() 해서localConsole.debug는, 콜 해, 「Calling Class」의 범위내에서 동작해, 「Cape」에의를 제공합니다.toString★★★★★★ 。
localConsole = {
info: function(caller, msg, args) {
if ( window.console && window.console.info ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.info.apply(console, params);
}
},
debug: function(caller, msg, args) {
if ( window.console && window.console.debug ) {
var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
if (args) {
params = params.concat(args);
}
console.debug.apply(console, params);
}
}
};
someClass = {
toString: function(){
return 'In scope of someClass';
},
someFunc: function() {
myObj = {
dr: 'zeus',
cat: 'hat'
};
localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
}
};
someClass.someFunc();
이것은 Firebug와 같은 출력을 제공합니다.
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
또는 Chrome:
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
개인적으로 사용하는 것은 tarek11011과 비슷합니다.
// Use a less-common namespace than just 'log'
function myLog(msg)
{
// Attempt to send a message to the console
try
{
console.log(msg);
}
// Fail gracefully if it does not exist
catch(e){}
}
은 그냥 것 것이입니다.console.log()자바스크립트 왜냐하면 이 코드를 잊어버리고 프로덕션 사이트에 있는 경우 해당 페이지의 모든 JavaScript 코드가 손상될 수 있기 때문입니다.
하면 .console.log()어떤 프로그래밍 소프트웨어 에디터에 디버깅된 코드가 있고 출력은 대부분 나에게 가장 적합한 에디터(Google Chrome)를 볼 수 있습니다.를 누르고 Console 탭을 누릅니다.결과가 나올 거예요.해피 코딩.:)
개발자가 console.() 스테이트먼트를 체크하는 데 많은 문제가 있었습니다.Internet Explorer 10이나 Visual Studio 2012 등의 놀라운 개선에도 불구하고 Internet Explorer 디버깅은 별로 좋아하지 않습니다.
콘솔 오브젝트 자체를 덮어썼습니다.localhost에 있을 때만 console 문을 허용하는 __localhost 플래그를 추가했습니다.또한 Internet Explorer에 console.() 함수를 추가했습니다(대신 alert()를 표시합니다).
// Console extensions...
(function() {
var __localhost = (document.location.host === "localhost"),
__allow_examine = true;
if (!console) {
console = {};
}
console.__log = console.log;
console.log = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__log === "function") {
console.__log(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__info = console.info;
console.info = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__info === "function") {
console.__info(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__warn = console.warn;
console.warn = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__warn === "function") {
console.__warn(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__error = console.error;
console.error = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__error === "function") {
console.__error(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg);
}
}
};
console.__group = console.group;
console.group = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__group === "function") {
console.__group(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert("group:\r\n" + msg + "{");
}
}
};
console.__groupEnd = console.groupEnd;
console.groupEnd = function() {
if (__localhost) {
if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
console.__groupEnd(arguments);
} else {
var i, msg = "";
for (i = 0; i < arguments.length; ++i) {
msg += arguments[i] + "\r\n";
}
alert(msg + "\r\n}");
}
}
};
/// <summary>
/// Clever way to leave hundreds of debug output messages in the code,
/// but not see _everything_ when you only want to see _some_ of the
/// debugging messages.
/// </summary>
/// <remarks>
/// To enable __examine_() statements for sections/groups of code, type the
/// following in your browser's console:
/// top.__examine_ABC = true;
/// This will enable only the console.examine("ABC", ... ) statements
/// in the code.
/// </remarks>
console.examine = function() {
if (!__allow_examine) {
return;
}
if (arguments.length > 0) {
var obj = top["__examine_" + arguments[0]];
if (obj && obj === true) {
console.log(arguments.splice(0, 1));
}
}
};
})();
사용 예:
console.log("hello");
크롬/Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
코드를 자세히 살펴보면 console.inspect() 함수를 찾을 수 있습니다.QA/고객 문제 해결에 도움이 되는 디버깅 코드를 제품 주변의 특정 영역에 남길 수 있도록 몇 년 전에 만들었습니다.예를 들어, 일부 릴리스된 코드에 다음 행을 남깁니다.
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
그런 다음 출시된 제품에서 콘솔에 다음을 입력합니다(또는 'javascript:'가 앞에 붙은 주소 표시줄).
top.__examine_someLabel = true;
그러면 기록된 console.inspect() 문이 모두 표시됩니다.여러 번 큰 도움이 되었습니다.
다른 브라우저의 회선 번호를 유지하는 심플한 Internet Explorer 7 이하:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
이 방법을 사용하면 콘솔에서 밝은 파란색으로 텍스트를 인쇄합니다.
Delan과 Andru의 아이디어를 더욱 개선(이 때문에 이 답변은 편집된 버전입니다), console.log는 존재할 가능성이 높지만 다른 기능은 존재할 수 없습니다.따라서 console.log...와 같은 함수에 대한 기본 맵을 사용합니다.
콘솔 기능이 존재하지 않는 경우 콘솔 기능을 생성하는 스크립트를 작성할 수 있습니다.
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log; // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log
다음으로 다음 중 하나를 사용합니다.
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
이러한 기능은 다양한 유형의 항목(로그, 정보, 오류 또는 경고에 따라 필터링 가능)을 기록하고 콘솔을 사용할 수 없는 경우에도 오류를 발생시키지 않습니다.이러한 기능은 Firebug 및 Chrome 콘솔에서 작동합니다.
이 질문은 오래되어 답변이 좋지만 다른 로깅 기능에 대한 업데이트를 제공하고 싶습니다.
그룹으로 인쇄할 수도 있습니다.
console.group("Main");
console.group("Feature 1");
console.log("Enabled:", true);
console.log("Public:", true);
console.groupEnd();
console.group("Feature 2");
console.log("Enabled:", false);
console.warn("Error: Requires auth");
console.groupEnd();
인쇄 대상:
이는 다음 페이지에 따라 모든 주요 브라우저에서 지원됩니다.
언급URL : https://stackoverflow.com/questions/217957/how-do-i-print-debug-messages-in-the-google-chrome-javascript-console
'itsource' 카테고리의 다른 글
| __init_.py를 사용하더라도 "비패키지 내 상대 Import 시도"를 수정하는 방법 (0) | 2022.09.11 |
|---|---|
| 도커 볼륨 MariaDB Windows (0) | 2022.09.11 |
| Java에서 Clojure로 리라이트 (0) | 2022.09.11 |
| 스칼라 변환 방법java.util.List에 목록 표시? (0) | 2022.09.11 |
| 형제 결과에서 매개 변수에 대한 행 값을 일치시키는 방법은 무엇입니까? (0) | 2022.09.11 |