你僅使用 console.log 來查看 JS 的值嗎?
本篇介紹各種 console 語法,試著讓你的 log 更有質感吧:
- table:讓陣列內容以表格方式呈現
- 上色語法:使用 CSS 語法為你的 console 上色
- time:計算 JS 運算所花的時間
- group:群組化資訊
- 還有各種實戰運用技巧
#有在FB打開過Console嗎
#住手 #我們都是開發者啊
同時也有1部Youtube影片,追蹤數超過17萬的網紅Lok Cheung,也在其Youtube影片中提到,Why is HLG amazing? Let me convince you! Check out Loupedeck+ https://amzn.to/2KN4OrM This video is sponsored by Loupedeck+; though I am convinced! ...
console log 在 BorntoDev Facebook 的最佳解答
🔥 สวัสดีจ้า วันนี้แอดจะมาบอกต่อ 5 ฟีเจอร์เด็ดๆ ของ Javascript Console ที่จะช่วยให้เราสามารถ print log ได้สะดวกมากยิ่งขึ้น มีตัวไหนบ้างไปดูกันเลย
.
⚡ 1) Console Groups - จะทำการ log ค่าออกมาในรูปแบบ Group จะทำให้ดูได้ง่ายมากยิ่งขึ้น
.
📝 วิธีการใช้งาน - เปิดด้วย console.group() และปิดด้วย console.groupEnd(); เช่น
.
console.group("Person Data");
console.log("Name: BorntoDev");
console.log("Age: 4");
console.groupEnd();
console.log("Outside of the group...");
.
⚡ 2) Live Expressions - เป็นฟีเจอร์ของ Google Chrome ที่จะช่วยแสดงผลลัพธ์จากโค้ด JavaScript แบบเรียลไทม์ได้เลย
.
⚡ 3) Timing Your Code - ใช้เพื่อจับเวลาในการทำงานของโค้ด
.
📝 วิธีการใช้งาน - เปิดด้วย console.time() และปิดด้วย console.timeEnd() เช่น
.
console.time("addHeadings");
for (let i = 0; i < 10000; i++) {
document.body.insertAdjacentHTML("beforeend", "
Heading
");}
console.timeEnd("addHeadings");
.
⚡ 4) Styling with CSS - สามารถใส่ CSS Style เวลา print log ออกมาได้เลย เฟี้ยวมาก555
.
📝 วิธีการใช้งาน - โดยจะใช้ร่วมกับ console.log() ใช้ %c ข้างหน้าข้อความที่ต้องการให้แสดง CSS เช่น
.
console.log("I am programer in %cborn to dev co., Ltd.", "color: yellow; font-weight: bold;");
.
⚡ 5) Assertions - ใช้ในการ Debug โค้ดของเราเขียนว่าสามารถทำงานได้ตามจุดประสงค์หรือไม่ ซึ่งจะ return ที่เป็น false เท่านั้น
.
📝 วิธีการใช้งาน - format console.assert(assertion, obj1 [, obj2, ..., objN]); เช่น
.
console.assert(true === true);
console.assert(true === false,"false");
.
จบแล้วกับ 5 ฟีเจอร์เด็ดที่แอดรวบรวมมาให้ ไหนใครลองไปใช้แล้วบ้าง ? หรือมีตัวไหนเด็ดๆนอกจาก 5 อันนี้ ไว้มาบอกต่อกันบ้างนะคร้าบบ 😄
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
console log 在 BorntoDev Facebook 的最佳解答
📌 "ไหนนนน ใครชอบใช้ console.log มาเทสเว็บแอปยกมือขึ้นนนน !! 5555"
.
วันนี้แอดจะมาแนะนำ Turbo Console Log ที่ช่วยให้การแสดงผล Log ของเราง่ายขึ้น แค่คลิกที่ตัวแปรที่ต้องการ + กดคีย์ลัดเท่านั้น
.
🔥 แถมไม่ใช่แค่แสดงผลเฉย ๆ นะ ! เขายังบอกด้วยว่า ที่เราให้มันแสดงผลใน Log ตรงนี้เนี่ย มันมาจาก ตัวแปร / Object ตัวไหนได้อีกด้วย !!
.
เรียกได้ว่าเอาใจจัด ๆ สำหรับใครชอบ Test แล้วดูแบบ Real-time ไม่ต้องใช้ Breakpoint แม้ว่าจะไม่ได้ดีที่สุด แต่อันนี้แหละ สะดวกที่สุดแล้วนั่นเองง 555555555
.
👉 ใครสนใจคลิกตามแอดได้ที่นี่เลยคร้าบ >> https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
.
สุดท้ายนี้อยากบอกว่า .. "ใช้ console log ดูค่าเวลาเขียน JS แล้วต้องใช้อะไรถึงจะมีค่าในสายตาเธอบ้างอะ !?" 🤣
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
console log 在 Lok Cheung Youtube 的最讚貼文
Why is HLG amazing? Let me convince you!
Check out Loupedeck+ https://amzn.to/2KN4OrM
This video is sponsored by Loupedeck+; though I am convinced! I had been using it ever since and it surely make me edit and colour correct MUCH faster!
Full list of gear that I use on this channel: https://kit.co/lokcheung / https://amazon.com/shop/lokcheung
-------- Gears that I used in this video --------
[ Main camera and accessories ]
Sony a7S II
Amazon https://geni.us/a7SII B&H https://bhpho.to/2D57BFu
Sony 16-35mm f/4 Zeiss FE
Amazon https://geni.us/sony1635 B&H https://bhpho.to/2D1iAjm
SLR Magic 82mm Fixed ND 1-5 Stops Filter Set
https://bhpho.to/3a3bb4l
X-Rite ColorChecker Passport Video
Amazon https://geni.us/ColorCheckerVideo B&H https://bhpho.to/2D5BQvN
Atomos Ninja V 5” 4K HDR Recorder
Amazon https://geni.us/ninjaV B&H https://bhpho.to/2JkJ0EF
Atomos Shinobi 5” 4K HDR Monitor
Amazon https://geni.us/Shinobilok / https://bhpho.to/2N9Nr3w
[ Audio ]
Røde Wireless Go
Amazon https://geni.us/WirelessGO B&H https://bhpho.to/2PVjW6V
[ Support ] ?
Manfrotto Pocket Tripod
Amazon https://geni.us/PocketTri B&H https://bhpho.to/2D3OKe5
Gitzo Mountaineer Series 1, 4 Sections
Amazon https://geni.us/Gitzo14 B&H https://bhpho.to/2FzySpw
Manfrotto 500 Fluid Video Head
Amazon https://geni.us/MVH500AH B&H https://bhpho.to/2FyW33j
Manfrotto 244 MicroFriction Arm
Amazon https://geni.us/244Micro B&H https://bhpho.to/2N8vthz
[ Lighting ] ?
Rotolight AEOS
Amazon https://geni.us/AEOS B&H https://bhpho.to/2CuPb4y
[ Other ]
Loupedeck+ Editing Console
Amazon https://geni.us/LoupeDeck B&H https://bhpho.to/30IMrJv
edelkrone SliderONE v2
https://bhpho.to/2JOPjz1
edelkrone HeadONE
https://bhpho.to/2JOPtGD
* I may earn a bit of commission if you use the links above to help me keep on making videos for you, so thank you!
If you like my channel, please consider helping out with these two ways: YouTube Membership or Patreon.
YouTube Membership:
Join as a member to this channel, get a special sponsor badge next to your comment and other perks: https://www.youtube.com/LokTube/join
Patreon:
This is a platform for supporting creators like, me. Please consider helping out and pick your reward here:
https://www.patreon.com/lokcheung
https://twitter.com/lokcheung
https://instagram.com/lokcheung
https://facebook.com/LokCheungPage
https://lok-cheung.com
Music:
"Elevator Music" by Julian Avila https://soundcloud.com/julian_avila/elevatormusic
"easy living" by Birocratic (http://birocratic.lnk.to/allYL) https://www.youtube.com/officialbiro
Music by Chillhop: http://youtube.com/chillhopdotcom
GYVUS - Lemon Tea: https://soundcloud.com/gyvus
Listen on Spotify: http://bit.ly/ChillhopSpotify
For business enquiry: contact@lok-cheung.com
#HLG #Loupedeck #FCP #FCPX #LokCheung #LokTopTips
console log 在 console.log() - Web APIs | MDN 的相關結果
The console.log() method outputs a message to the web console. The message may be a single string (with optional substitution values), ... ... <看更多>
console log 在 JavaScript中的console.log()函式詳細介紹 - 程式前沿 的相關結果
對於JavaScript程式的除錯,相比於alert(),使用console.log()是一種更好的方式,原因在於:alert()函式會阻斷JavaScript程式的執行,從而造成副作用 ... ... <看更多>
console log 在 【JavaScript萌新筆記】console.log到底是蝦米東東? 的相關結果
今天來聊一下console,log! console英文的意思就是控制台,log的意思是紀錄, 所以以文字面來說的話,就是把log顯示在console上。 沒錯!console.log ... ... <看更多>