console.log คืออะไร

การใช้งานconsole.logคืออะไร?

โปรดอธิบายวิธีใช้ใน JavaScript พร้อมกับตัวอย่างโค้ด

มันไม่ใช่คุณสมบัติ jQuery แต่เป็นคุณสมบัติสำหรับการดีบัก คุณสามารถบันทึกสิ่งที่คอนโซลได้เมื่อมีบางสิ่งเกิดขึ้น ตัวอย่างเช่น

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

จากนั้นคุณจะเห็น#someButton was clickedในแท็บ "คอนโซล" ของ Firebug (หรือคอนโซลของเครื่องมืออื่น - เช่นเครื่องมือตรวจสอบเว็บของ Chrome) เมื่อคุณคลิกปุ่ม

ด้วยเหตุผลบางอย่างวัตถุคอนโซลอาจไม่พร้อมใช้งาน จากนั้นคุณสามารถตรวจสอบว่าเป็น - มีประโยชน์เนื่องจากคุณไม่ต้องลบรหัสการดีบักเมื่อคุณปรับใช้กับการผลิต:

if (window.console && window.console.log) {
  // console is available
}

สถานที่ที่คุณสามารถดูคอนโซลได้! เพียงเพื่อให้พวกเขาทั้งหมดในคำตอบเดียว

Firefox

http://getfirebug.com/

(ตอนนี้คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัว Ctrl + Shift + J ของ Firefox (เครื่องมือ> นักพัฒนาเว็บ> คอนโซลข้อผิดพลาด) แต่ Firebug นั้นดีกว่ามากใช้ Firebug)

Safari และ Chrome

โดยทั่วไปแล้วเหมือนกัน

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

อย่าลืมว่าคุณสามารถใช้โหมดความเข้ากันได้เพื่อดีบัก IE7 และ IE8 ใน IE9 หรือ IE10

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

หากคุณต้องเข้าถึงคอนโซลใน IE6 สำหรับ IE7 ให้ใช้ bookmarklet Firebug Lite

http://getfirebug.com/firebuglite/มองหา bookmarklet ที่เสถียร

http://en.wikipedia.org/wiki/Bookmarklet

อุปรากร

http://www.opera.com/dragonfly/

iOS

ใช้งานได้กับ iPhone, iPod touch และ iPads ทั้งหมด

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

ขณะนี้ใช้ iOS 6 คุณสามารถดูคอนโซลผ่าน Safari ใน OS X หากคุณเสียบอุปกรณ์ หรือคุณสามารถใช้อีมูเลเตอร์เพียงเปิดหน้าต่างเบราว์เซอร์ Safari แล้วไปที่แท็บ "พัฒนา" คุณจะพบตัวเลือกในการรับตัวตรวจสอบ Safari เพื่อสื่อสารกับอุปกรณ์ของคุณ

Windows Phone, Android

ทั้งสองนี้ไม่มีคอนโซลในตัวและไม่มีความสามารถในการคั่นหน้า ดังนั้นเราใช้ http://jsconsole.com/ประเภท: ฟังและมันจะให้แท็กสคริปต์ของคุณใน HTML ของคุณ จากนั้นคุณสามารถดูคอนโซลภายในเว็บไซต์ jsconsole

iOS และ Android

นอกจากนี้คุณยังสามารถใช้http://html.adobe.com/edge/inspect/เพื่อเข้าถึงเครื่องมือตรวจสอบเว็บและคอนโซลบนอุปกรณ์ใด ๆ โดยใช้ปลั๊กอินเบราว์เซอร์ที่สะดวก

ปัญหาเบราว์เซอร์ที่เก่ากว่า

สุดท้าย IE เวอร์ชันเก่าจะพังถ้าคุณใช้ console.log ในรหัสของคุณและไม่มีเครื่องมือสำหรับนักพัฒนาเปิดขึ้นในเวลาเดียวกัน โชคดีที่มันเป็นเรื่องง่าย ใช้ข้อมูลโค้ดด้านล่างที่ด้านบนของรหัสของคุณ:

 if(!window.console){ window.console = {log: function(){} }; } 

สิ่งนี้จะตรวจสอบว่ามีคอนโซลอยู่หรือไม่และจะตั้งเป็นวัตถุที่มีฟังก์ชั่นว่างlogหรือไม่ หน้าต่างทางนี้พื้นรองเท้าและหน้าต่างพื้นรองเท้าบล็อกไม่เคยมีอย่างแท้จริงundefined.

คุณสามารถดูข้อความใด ๆ ที่เข้าสู่คอนโซลหากคุณใช้เครื่องมือเช่น Firebug เพื่อตรวจสอบรหัสของคุณ สมมติว่าคุณทำสิ่งนี้:

console.log('Testing console');

เมื่อคุณเข้าถึงคอนโซลใน Firebug (หรือเครื่องมือใดก็ตามที่คุณตัดสินใจใช้เพื่อตรวจสอบรหัสของคุณ) คุณจะเห็นข้อความใด ๆ ที่คุณบอกให้ฟังก์ชั่นบันทึก สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการดูว่าฟังก์ชั่นกำลังดำเนินการอยู่หรือไม่หรือตัวแปรถูกส่ง / กำหนดอย่างเหมาะสม มันค่อนข้างมีค่าสำหรับการค้นหาว่าเกิดอะไรขึ้นกับรหัสของคุณ

มันจะโพสต์ข้อความบันทึกไปยังคอนโซลจาวาสคริปต์ของเบราว์เซอร์เช่น Firebug หรือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (Chrome / Safari) และจะแสดงบรรทัดและไฟล์ที่ถูกเรียกใช้งาน

นอกจากนี้เมื่อคุณส่งออกวัตถุ jQuery มันจะรวมถึงการอ้างอิงถึงองค์ประกอบใน DOM และการคลิกมันจะไปที่นั้นในแท็บองค์ประกอบ / HTML

คุณสามารถใช้วิธีการต่าง ๆ แต่ระวังว่ามันจะทำงานใน Firefox คุณต้องเปิด Firebug มิฉะนั้นหน้าทั้งหมดจะล้มเหลว ไม่ว่าคุณจะบันทึกสิ่งใดเป็นตัวแปรอาร์เรย์วัตถุหรือองค์ประกอบ DOM ก็จะให้รายละเอียดแบบเต็มรวมถึงแบบตัวอย่างสำหรับวัตถุด้วย (น่าสนใจเสมอที่จะมีการกระตุ้น) คุณสามารถรวมเป็นจำนวนมากอาร์กิวเมนต์ได้เท่าที่คุณต้องการและจะมีการแทนที่ด้วยช่องว่าง

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

สิ่งเหล่านี้แสดงพร้อมกับโลโก้ที่แตกต่างกันสำหรับแต่ละคำสั่ง

คุณยังสามารถใช้ console.profile(profileName);เพื่อเริ่มการทำโปรไฟล์ฟังก์ชั่นสคริปต์ ฯลฯ และจบลงด้วยconsole.profileEnd(profileName);และมันจะแสดงในแท็บโปรไฟล์ใน Chrome (ไม่รู้ด้วย FF)

สำหรับการอ้างอิงที่สมบูรณ์ไปที่http://getfirebug.com/logging และฉันขอแนะนำให้คุณอ่าน(ร่องรอย, กลุ่ม, การทำโปรไฟล์, การตรวจสอบวัตถุ)

หวังว่านี่จะช่วยได้!

ไม่มีอะไรเกี่ยวข้องกับ jQuery และถ้าคุณต้องการใช้ฉันแนะนำให้คุณทำ

if (window.console) {
    console.log("your message")
}

ดังนั้นคุณจะไม่ทำลายรหัสของคุณเมื่อไม่พร้อมใช้งาน

ตามที่แนะนำในความคิดเห็นคุณยังสามารถดำเนินการได้ในที่เดียวจากนั้นใช้console.logตามปกติ

if (!window.console) { window.console = { log: function(){} }; }

console.logไม่มีส่วนเกี่ยวข้องกับ jQuery เป็นวัตถุ / วิธีการทั่วไปที่มีให้โดย debuggers (รวมถึงตัวดีบัก Chrome และ Firebug) ที่อนุญาตให้สคริปต์บันทึกข้อมูล (หรือวัตถุในกรณีส่วนใหญ่) ไปยังคอนโซล JavaScript

console.logบันทึกข้อมูลการแก้ปัญหาไปยังคอนโซลในบางเบราว์เซอร์ (Firefox ที่ติดตั้ง Firebug, Chrome, IE8, อะไรก็ตามที่ติดตั้ง Firebug Lite) ใน Firefox เป็นเครื่องมือที่มีประสิทธิภาพมากช่วยให้คุณสามารถตรวจสอบวัตถุหรือตรวจสอบเค้าโครงหรือคุณสมบัติอื่น ๆ ขององค์ประกอบ HTML มันไม่เกี่ยวข้องกับ jQuery แต่มีสองสิ่งที่ทำได้โดยทั่วไปเมื่อใช้กับ jQuery:

• ติดตั้งส่วนขยายFireQueryสำหรับ Firebug สิ่งนี้จะทำให้การบันทึกของวัตถุ jQuery ดูดีขึ้น

• สร้าง wrapper ที่สอดคล้องกับระเบียบโค้ดของ jQuery

ซึ่งมักจะหมายถึงสิ่งนี้:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

ซึ่งคุณสามารถเรียกเช่นนั้น

$('foo.bar').find(':baz').log().hide();

เพื่อตรวจสอบเครือข่าย jQuery ได้อย่างง่ายดาย

console.log ไม่มีส่วนเกี่ยวข้องกับ jQuery

มันบันทึกข้อความไปยังคอนโซลการดีบักเช่น Firebug

จุดที่สับสนบางครั้งก็คือการบันทึกข้อความพร้อมกับเนื้อหาของวัตถุใดวัตถุหนึ่งของคุณโดยใช้ console.log คุณจะต้องส่งผ่านหนึ่งในสองเป็นอาร์กิวเมนต์ที่แตกต่างกัน ซึ่งหมายความว่าคุณต้องแยกพวกเขาด้วยเครื่องหมายจุลภาคเพราะถ้าคุณต้องใช้ตัวดำเนินการ + เพื่อต่อผลลัพธ์ออกมาสิ่งนี้จะเรียก.toString()วิธีการของวัตถุของคุณโดยปริยาย สิ่งนี้ในกรณีส่วนใหญ่จะไม่ถูกยกเลิกอย่างชัดเจนObjectไม่ได้ให้ข้อมูลที่เป็นประโยชน์ใด ๆ

ตัวอย่างที่จะลองในคอนโซล:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

ในขณะที่ถ้าคุณพยายามเชื่อมข้อความที่เป็นข้อมูลพร้อมกับเนื้อหาของวัตถุคุณจะได้รับ:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

ดังนั้นโปรดทราบว่า console.log ในความเป็นจริงจะมีอาร์กิวเมนต์มากเท่าที่คุณต้องการ

ใช้console.logเพื่อเพิ่มข้อมูลการดีบักในหน้าของคุณ

หลายคนใช้alert(hasNinjas)เพื่อจุดประสงค์นี้ แต่console.log(hasNinjas)ทำงานได้ง่ายกว่า การใช้การแจ้งเตือนป็อปอัพกล่องโต้ตอบโมดอลที่บล็อกส่วนต่อประสานผู้ใช้

แก้ไข: ฉันเห็นด้วยกับBaptiste PernetและJan Hančičว่าเป็นความคิดที่ดีมากที่จะตรวจสอบว่าwindow.consoleมีการกำหนดไว้ก่อนหรือไม่เพื่อให้โค้ดของคุณไม่แตกหากไม่มีคอนโซล

ตัวอย่าง - สมมติว่าคุณต้องการทราบรหัสบรรทัดที่คุณสามารถเรียกใช้โปรแกรมของคุณ (ก่อนที่มันจะพัง!) เพียงพิมพ์

console.log("You made it to line 26. But then something went very, very wrong.")

คุณใช้เพื่อดีบักโค้ด JavaScript ด้วยFirebugสำหรับ Firefox หรือคอนโซล JavaScript ในเบราว์เซอร์WebKit

var variable;

console.log(variable);

มันจะแสดงเนื้อหาของตัวแปรแม้ว่ามันจะเป็นอาร์เรย์หรือวัตถุ

มันคล้ายกับprint_r($var);สำหรับPHP

ระวัง: การโทรออกจากคอนโซลในรหัสการผลิตของคุณจะทำให้ไซต์ของคุณแตกใน Internet Explorer อย่าทำให้มันคลาย ดู: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

ในช่วงแรกการดีบัก JS ดำเนินการผ่านalert()ฟังก์ชั่น แต่ตอนนี้เป็นการฝึกที่ล้าสมัย

console.log()เป็นฟังก์ชั่นที่เขียนข้อความเข้าสู่ระบบคอนโซลแก้จุดบกพร่องเช่น Webkitหรือ Firebug ในเบราว์เซอร์คุณจะไม่เห็นอะไรเลยบนหน้าจอ มันบันทึกข้อความไปยังคอนโซลการดีบัก มีเฉพาะใน Firefox ที่มี Firebug และในเบราว์เซอร์ที่ใช้ Webkit (Chrome และ Safari) มันไม่ได้ทำงานได้ดีในทุกรุ่น IE

วัตถุคอนโซลเป็นส่วนขยายของ DOM

console.log()ควรใช้ในรหัสเฉพาะในช่วงการพัฒนาและแก้จุดบกพร่อง

ถือว่าเป็นการปฏิบัติที่ไม่ดีที่มีคนออกconsole.log()จากไฟล์จาวาสคริปต์บนเซิร์ฟเวอร์ที่ใช้งานจริง

หากเบราว์เซอร์ของคุณรองรับการดีบักคุณสามารถใช้วิธี console.log () เพื่อแสดงค่า JavaScript

เปิดใช้งานการดีบักในเบราว์เซอร์ของคุณด้วยF12และเลือก "คอนโซล" ในเมนูดีบักเกอร์

คอนโซลใน JavaScript ลองแก้ไขหรือ "debug" โปรแกรม JavaScript ที่ไม่ทำงานและฝึกโดยใช้คำสั่ง console.log () มีทางลัดที่จะช่วยให้คุณเข้าถึงคอนโซล JavaScript โดยอิงจากเบราว์เซอร์ที่คุณใช้:

แป้นพิมพ์ลัดของ Chrome Console

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

แป้นพิมพ์ลัดของคอนโซล Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

แป้นพิมพ์ลัดของ Internet Explorer Console

F12 สำคัญ

แป้นพิมพ์ลัดของ Safari Console

Cmd+ Option+C

console.logโดยเฉพาะเป็นวิธีการสำหรับนักพัฒนาในการเขียนรหัสเพื่อแจ้งให้ผู้พัฒนาทราบอย่างชัดเจนว่าโค้ดนั้นทำอะไร มันสามารถใช้เพื่อเตือนคุณว่ามีปัญหา แต่ไม่ควรแทนที่ดีบักเกอร์แบบโต้ตอบเมื่อถึงเวลาที่จะทำการดีบั๊กโค้ด ธรรมชาติของมันไม่ตรงกันหมายความว่าค่าที่บันทึกไว้ไม่จำเป็นต้องแทนค่าเมื่อมีการเรียกเมธอด

ในระยะสั้น: บันทึกข้อผิดพลาดด้วยconsole.log(ถ้ามี) จากนั้นแก้ไขข้อผิดพลาดโดยใช้ดีบักเกอร์ที่คุณเลือก: Firebug , เครื่องมือสำหรับนักพัฒนา WebKit (มีอยู่ในSafariและChrome ), IE Developer Tools หรือ Visual Studio

ฉันรู้สึกว่าการเขียนโปรแกรมเว็บง่ายมากเมื่อฉันเริ่มconsole.logการดีบั๊ก

var i;

ถ้าฉันต้องการตรวจสอบค่าของiruntime ..

console.log(i);

คุณสามารถตรวจสอบค่าปัจจุบันของiในแท็บคอนโซลของ firebug มันถูกใช้เป็นพิเศษสำหรับการแก้จุดบกพร่อง

มันถูกใช้เพื่อเข้าสู่ระบบ (ทุกสิ่งที่คุณผ่านมัน) ไปยังคอนโซลFirebug การใช้งานหลักคือการดีบักโค้ด JavaScript ของคุณ

นอกเหนือจากประเพณีที่กล่าวถึงข้างต้นแล้วconsole.logยังสามารถพิมพ์ไปยังเครื่องปลายทางnode.jsได้ เซิร์ฟเวอร์ที่สร้างด้วย express (เช่น) สามารถใช้console.logเพื่อเขียนไปยังไฟล์ตัวบันทึกเอาต์พุต

ในสคริปต์จาวาไม่มีฟังก์ชั่นอินพุตและเอาต์พุต ดังนั้นการ debug รหัส console.log () วิธีการใช้มันเป็นวิธีการเข้าสู่ระบบ มันจะถูกพิมพ์ภายใต้บันทึกของคอนโซล (เครื่องมือในการพัฒนา)

ไม่มีอยู่ใน IE8 และต่ำกว่าจนกว่าคุณจะเปิดเครื่องมือการพัฒนา IE

นี่คือไม่มีอะไรจะจัดการกับ jQuery การconsole.log()อ้างอิงไปยังฟังก์ชั่นการบันทึกของวัตถุคอนโซลซึ่งให้วิธีการในการบันทึกข้อมูลไปยังคอนโซลของเบราว์เซอร์ วิธีการเหล่านี้มีจุดประสงค์เพื่อการดีบักเท่านั้นและไม่ควรเชื่อถือในการนำเสนอข้อมูลแก่ผู้ใช้ปลายทาง