Chrome 자바 스크립트 콘솔에서 디버그 메시지를 어떻게 인쇄합니까?
답변:
브라우저 주소 표시 줄에서 다음 코드를 실행합니다.
자바 스크립트 : console.log (2);
Chrome의 "JavaScript 콘솔"에 메시지를 성공적으로 인쇄합니다.
console.log()배포 전에 프로덕션 코드에서 코드를 제거해야합니다.
Console.Log그렇지 않은 경우 이러한 메시지가 사용자의 JavaScript 콘솔에 로깅되므로 배포 전에 프로덕션 코드에서 @Sebas를 제거해야합니다. 그들은 그것을 볼 가능성이 없지만 장치의 메모리 공간을 차지하고 있습니다. 또한 로그의 내용에 따라 사람들에게 앱을 해킹 / 역 엔지니어링하는 방법을 알려줄 가능성이 있습니다.
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 콘솔에서 작동합니다.
if (!window.console) {다음 모든 것을 괄호 안에 넣으면 코드가 더 엄격하지 않습니까? 지금 당신은 같은 물건을 네 번 평가하고 있습니다.
많은 개발자가 놓친 멋진 기능을 추가하십시오.
console.log("this is %o, event is %o, host is %s", this, e, location.host);이것은 마법 %o덤프 클릭과 깊은 검색 가능한 자바 스크립트 객체의 내용.%s레코드 용으로 만 표시되었습니다.
또한 이것은 시원합니다.
console.log("%s", new Error().stack);new Error()호출 지점 ( 파일 경로 및 행 번호 포함)에 Java와 유사한 스택 추적을 제공합니다. ! 포함)에 .
모두 %o와new Error().stack 크롬과 파이어 폭스에서 사용할 수 있습니다!
Firefox의 스택 추적에도 사용하십시오.
console.trace();으로 https://developer.mozilla.org/en-US/docs/Web/API/console는 말한다.
행복한 해킹!
업데이트 : 일부 라이브러리는 나쁜 사람들이 작성하여 console자체 목적으로 객체를 재정의 합니다. console라이브러리를로드 한 후 원래 브라우저를 복원하려면 다음을 사용하십시오.
delete console.log;
delete console.warn;
....스택 오버플로 질문 복원 console.log ()를 참조하십시오 .
간단한 경고-모든 console.log ()를 제거하지 않고 Internet Explorer에서 테스트하려면 Firebug Lite 를 사용해야 합니다. 그렇지 않으면 특히 친숙하지 않은 오류가 발생합니다.
또는 false를 반환하는 자신의 console.log ()를 만듭니다.
console해당 브라우저 인스턴스를 닫을 때까지 객체가 생성되어 존재합니다.
다음은 콘솔을 사용할 수 있는지 확인하는 간단한 스크립트입니다. 그렇지 않은 경우 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, 나는 같은 목적을 위해 사용합니다. 나는 함수 이름 배열을 사용하여 noop 콘솔을 만듭니다. 제 의견으로는이 작업을 수행하는 가장 편리한 방법은 무엇입니까? console.log하지만 기능 이있는 Internet Explorer를 관리 했지만 다음과 같은 기능 은 없습니다 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);
}
}console.constructor === Object && (log = m => console.log(m))
다음은 콘솔 래퍼 클래스입니다. 그것은 삶을 더 쉽게 만들 수 있도록 스코프 출력을 제공합니다. 호출 클래스의 범위에서 실행되어 해당 메소드에 대한 액세스를 제공하는 localConsole.debug.call()so 사용에 유의하십시오 .localConsole.debugtoString
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 코드를 고수하는 것 외에 로깅을하는 것이 좋습니다. 잊어 버린 경우 프로덕션 사이트에 있으면 잠재적으로 모든 JavaScript 코드가 손상 될 수 있기 때문에 해당 페이지에 대한
if(windows.console) console.log(msg)?
window.console네 말 뜻은. 콘솔이 재정의 된 후 오류가 발생했을 때 (console.log가 함수가 아닌 경우) 유용합니다. 하는 window.console && window.console.log instanceof Function것이 더 유용 할 것입니다.
개발자가 콘솔에서 확인하는 데 많은 문제가 있습니다. () 문. 그리고 Internet Explorer 10 및 Visual Studio 2012 등 의 환상적인 개선에도 불구하고 Internet Explorer 디버깅을 좋아하지 않습니다 .
그래서 콘솔 객체 자체를 재정의했습니다 ... localhost에있을 때 콘솔 문 만 허용하는 __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");크롬 / 파이어 폭스 :
prints hello in the console window.인터넷 익스플로러:
displays an alert with 'hello'.코드를 자세히 보는 사람들은 console.examine () 함수를 발견 할 것입니다. QA / 고객 문제를 해결하는 데 도움이되도록 제품 주변의 특정 영역에 디버그 코드를 남겨 둘 수 있도록 몇 년 전에 만들었습니다 . 예를 들어, 릴리스 된 코드에 다음 줄을 남겨 둡니다.
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}그런 다음 출시 된 제품에서 콘솔에 다음을 입력하십시오 (또는 'javascript :'접두사가있는 주소 표시 줄).
top.__examine_someLabel = true;그런 다음 기록 된 console.examine () 문을 모두 볼 수 있습니다. 여러 번 환상적인 도움이되었습니다.
다른 브라우저의 줄 번호를 유지하는 간단한 Internet Explorer 7 이하 심 :
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
Delan and 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.log()js 디버깅에 훌륭합니다 ... 실제로 그것을 사용하는 것을 종종 잊어 버립니다.