Merge pull request #114 from javascript-tutorial/developer_console

Developer console

Author: EpicHigh

1-js/01-getting-started/4-devtools/article.md

@@ -1,62 +1,63 @@
-# Developer console
+# คอนโซลนักพัฒนา (Developer console)
 
-โค้ดที่เขียนมักจะมาพร้อมข้อผิดพลาด และเหล่านักพัฒนามักจะทำเรื่องนี้อยู่เป็นนิจ
+โค้ดมีความเสี่ยงต่อข้อผิดพลาดอยู่เสมอ คุณจะมักจะทำความผิดได้ง่าย... โอ้ว โอ๊ะ ฉันพูดอะไรอยู่น่ะ? แน่ๆว่าคุณจะทำข้อผิดพลาด เฉพาะถ้าคุณเป็นมนุษย์ ไม่ใช่[หุ่นยนต์](https://en.wikipedia.org/wiki/Bender_(Futurama))นั่นแหละ
 
-แต่ในเบราเซอร์ ผู้ใช้งานจะไม่เห็นความผิดพลาด ที่เหล่านักพัฒนาทำไว้ ดังนั้นหากสคริปต์ที่เราเขียนมีข้อผิดพลาด เราจะไม่รู้และแก้ไขมันได้เลย
+ถ้าหากเกิดข้อผิดพลาดในสคริปต์ ค่าเริ่มต้นของระบบจะไม่แสดงข้อผิดพลาดให้ผู้ใช้เห็น ดังนั้นเราจึงไม่สามารถรู้ว่ามีอะไรผิดพลาดและไม่สามารถแก้ไขได้
 
-เพื่อย้อนไปดูว่าเราพลาดอะไรไป "เครื่องมือสำหรับนักพัฒนา (developer tools)" จึงติดมากับเบราเซอร์ด้วย
+เพื่อเห็นข้อผิดพลาดและรับข้อมูลอื่นๆ ที่มีประโยชน์เกี่ยวกับสคริปต์ บางเบราว์เซอร์ได้รวม "เครื่องมือนักพัฒนา" (developer tools) ไว้ในตัวเพื่อให้นักพัฒนาสามารถดูข้อมูลต่างๆ ได้
 
-นักพัฒนาส่วนใหญ่มักจะใช้ Chrome และ Firefox นั่นก็เพราะว่าทั้งสองตัวมี เครื่องมือสำหรับการพัฒนาที่ดีที่สุดในตลาด โดยปกตินักพัฒนามักเลือกใช้เบราเซอร์เพียงตัวเดียวในการพัฒนา แต่จะใช้เบราเซอร์อื่นร่วมด้วย แต่หลังจากที่ปัญหาเกิดแล้ว เช่น โค้ดที่เขียนไม่ซัพพอร์ตใน IE
+เนื่องจากเบราว์เซอร์ Chrome และ Firefox มีเครื่องมือนักพัฒนาที่ดีที่สุด ส่วนใหญ่นักพัฒนาโปรแกรมมักใช้เบราว์เซอร์เหล่านี้เป็นหลักในการพัฒนา ในขณะเดียวกันเบราว์เซอร์อื่นๆ ก็มีเครื่องมือนักพัฒนาบางส่วนจะมีคุณสมบัติพิเศษ แต่ยังอยู่ในช่วง "ดันฟีเจอร์" ตาม Chrome และ Firefox ดังนั้นส่วนใหญ่นักพัฒนาโปรแกรมมักใช้เบราว์เซอร์ที่ชื่นชอบเป็นหลักและสลับกันใช้เบราว์เซอร์อื่นๆ หากพบปัญหาที่เกี่ยวกับเบราว์เซอร์นั้นๆ
 
-เครื่องมือสำหรับนักพัฒนามีศักยภาพ พวกเขามีคุณสมบัติมากมาย เริ่มแรก เราจะสอนวิธีเปิด ดูข้อผิดพลาด และเรียกใช้คำสั่ง JavaScript กัน
+เครื่องมือนักพัฒนามีความสามารถมากมาย ตั้งแต่การตรวจสอบข้อผิดพลาด จนถึงการรันคำสั่ง JavaScript อย่างไรก็ตามเริ่มต้นด้วยการเรียนรู้วิธีการเปิดเครื่องมือนักพัฒนา ดูข้อผิดพลาดและรันคำสั่ง JavaScript กันก่อนนะ
 
 ## Google Chrome
 
-ลองเปิดหน้า [bug.html](bug.html).
+เปิดหน้าเว็บไซต์ [bug.html](bug.html)
 
-เปิด developer tools ดู จะเห็นว่ามี error ในโค้ดจาวาสคริปต์ แต่ผู้ใช้จะมองไม่เห็น 
+มีข้อผิดพลาดในโค้ด JavaScript บนหน้านี้ แต่มันถูกซ่อนอยู่จากสายตาของผู้เข้าชมทั่วไป ดังนั้นเราจะเปิดเครื่องมือนักพัฒนาเพื่อดูมัน
 
-กด `F12` บน Windows หรือ `Cmd+Opt+J` บน Mac
+กรุณากด `key:F12` หรือถ้าคุณใช้ Mac ก็ให้กด `key:Cmd+Opt+J`
 
-developer tools จะเปิดหน้า console ขึ้นมาโดย default
+เครื่องมือนักพัฒนาจะเปิดขึ้นมาโดยอัตโนมัติที่แท็บ Console
 
-หน้าตาจะคล้ายๆแบบนี้
+ใน Console จะมีลักษณะที่คล้ายกันแบบด้านล่างเลย
 
 ![chrome](chrome.png)
 
-หน้าตาตัว developer tools จะเปลี่ยนไปตามเวอร์ชั่น ถึงหน้าตาที่เปิดออกมาจะไม่เป๊ะเว่อร์ แต่เค้าโครงจะคล้ายๆกัน
+รูปแบบและลักษณะของเครื่องมือนักพัฒนาจะเปลี่ยนไปตามเวอร์ชันของ Chrome ที่ใช้งานอยู่ แต่ส่วนใหญ่จะมีลักษณะเดียวกัน
 
-- ลองมองไปที่ console จะเห็นว่ามี error ที่เป็นแถบและตัวอักษรสีแดงอยู่ นั่นเพราะว่าเบราเซอร์ไม่รู้จักคำสั่ง "lalala"
-- ซ้ายมือของแถบ จะเห็นว่ามีการบอกบรรทัดที่ error นี้เกิดขึ้น
+- นี่คือข้อความแสดงความผิดพลาดที่มีสีแดงอยู่ ในกรณีนี้สคริปต์มีคำสั่ง "lalala" ซึ่งไม่รู้จัก จึงทำให้เกิดข้อผิดพลาดขึ้น
+- ทางด้านขวามือมีลิงก์ที่สามารถคลิกเพื่อเข้าไปดูแหล่งที่มาเพิ่มเติม `bug.html:12` และแสดงหมายเลขบรรทัดที่เกิดข้อผิดพลาด
 
-ข้างล่างข้อความ error จะสังเกตเห็นว่ามีลูกศรสีน้ำเงินอยู่ ตัวมันเองแทน "command line" เราสามารถพิมพ์จาวาสคริปต์ลงไป แล้วกด `enter` เพื่อสั่งโค้ดทำงาน หรือ `shift-enter` เพื่อพิมพ์โค้ดหลายบรรทัดแทน
+ด้านล่างข้อความแสดงความผิดพลาดจะมีสัญลักษณ์สีน้ำเงิน `>` แสดงถึง "command line" ที่เราสามารถพิมพ์คำสั่ง JavaScript ลงไปได้ กดปุ่ม `key:Enter` เพื่อรันคำสั่งนั้น ๆ นะ ในกรณีนี้เราจะพิมพ์ `alert("Hello")` แล้วกดปุ่ม `key:Enter` ดู
 
-เมื่อเราเปิดมาพบข้อผิดพลาด นั่นก็ถือเป็นการเริ่มต้นที่ดีแล้ว เราจะกลับมาพูดรายละเอียดในเชิงเกี่ยวกับเครื่องมือนักพัฒนา และการดีบักกันต่อในบท <info:debugging-chrome>
+ตอนนี้เราได้เห็นข้อผิดพลาดแล้ว ซึ่งเป็นเรื่องที่เพียงพอต่อการเริ่มต้น ในบทต่อไปเราจะกลับมาใช้เครื่องมือนักพัฒนากันอีกครั้งและพูดถึงการดีบักขั้นสูงกว่านี้ในบทเรียน <info:debugging-chrome> ต่อไป
 
-## Firefox, Edge, และเบราเซอร์ตัวอื่นๆ
-```smart header="ป้อนคำสั่งหลายบรรทัด"
-เมื่อเราพิมพ์โค้ดจาวาสคริปต์ลงไปในหน้าคอนโซล เมื่อกด `key:Enter` โค้ดชุดนั้นก็จะทำงาน
+```smart header="การพิมพ์หลายบรรทัด"
+โดยปกติเมื่อเราพิมพ์โค้ดลงในคอนโซล แล้วกดปุ่ม `key:Enter` โค้ดนั้นจะถูกรันทันที
 
-เมื่อจะป้อนโค้ดหลายบรรทัด, ให้กดปุ่ม `key:Shift+Enter` จะช่วยให้เราสามารถพิมพ์โค้ดหลายบรรทัดได้
+หากต้องการแทรกหลายบรรทัด สามารถกดปุ่ม `key:Shift+Enter` เพื่อใส่บรรทัดใหม่ได้ นั่นเป็นวิธีที่จะช่วยให้สามารถใส่โค้ด JavaScript ได้ยาวๆ ได้อย่างสะดวก และสามารถเลื่อนไปแก้ไขบรรทัดอื่นได้
 ```
 
-นักพัฒนาส่วนใหญ่ใช้ `F12` เพื่อเปิดหน้า console
+## Firefox, Edge และเบราว์เซอร์อื่น ๆ
 
-developer tools มักจะคล้ายๆกันไม่ว่าจะต่างเวอร์ชั่น ต่างเบราเซอร์ หากเชี่ยวชาญเพียงหนึ่ง ก็ใช้ตัวอื่นได้สูสีกัน
+เบราว์เซอร์อื่น ๆ ส่วนใหญ่ใช้ปุ่ม `key:F12` เพื่อเปิดเครื่องมือนักพัฒนา แต่ในบางเบราว์เซอร์อาจจะใช้ปุ่ม `key:Ctrl+Shift+I` แทน
+
+การใช้งานเครื่องมือนักพัฒนาในเบราว์เซอร์ต่าง ๆ มีลักษณะที่คล้ายกันมาก หากเรารู้วิธีการใช้เครื่องมือนักพัฒนาในเบราว์เซอร์หนึ่งแล้ว (เช่น Google Chrome) ก็สามารถสลับไปใช้งานในเบราว์เซอร์อื่น ๆ ได้อย่างง่ายดาย
 
 ## Safari
 
-Safari (เบราเซอร์ของผู้ใช้ Mac) ตัวนี้จะมาพร้อมความไม่เหมือนใคร โดยเราต้องไปเปิด "Develop menu" ก่อน
+เบราว์เซอร์ Safari บน Mac นั้นมีความแตกต่างไปในเรื่องนี้ โดยเราต้องเปิดใช้เมนู "Develop" ก่อนถึงจะสามารถใช้งานเครื่องมือนักพัฒนาได้
 
-เปิดหน้า "Preferences" ไปที่ "Advanced" และติ๊ก checkbox ด้านล่าง
+เปิดหน้าต่าง Preferences แล้วไปที่แท็บ "Advanced" มีช่องทำเครื่องหมายถูกด้านล่าง:
 
 ![safari](safari.png)
 
-ทีนี้กด `Cmd+Opt+C` หน้า console จะปรากฎขึ้น แถมเมนูด้านบน ยังปรากฎแถบ "Develop" เมื่อคลิกก็จะมีคำสั่งหลากหลายให้เลือกใช้
+จากนั้นกดปุ่ม `key:Cmd+Opt+C` เพื่อเปิดหรือปิดคอนโซลได้ โดยเพิ่มเติมว่าจะมีเมนูที่ชื่อ "Develop" ปรากฎขึ้นมาด้านบนของหน้าต่าง Safari ซึ่งเมนูนี้จะปรากฏขึ้นมาหลังจากเราเปิดใช้งานเมนู "Develop" โดยมีคำสั่งและตัวเลือกต่างๆ อีกมากมาย
 
 ## สรุป
 
-- Developer tools ช่วยให้เห็น error, สั่งโค้ดทำงาน, ตรวจค่าตัวแปร และอื่นๆ
-- เปิดโดยกด `F12` สำหรับเบราเซอร์ส่วนใหญ่บน Windows แต่ Chrome บน Mac จะใช้ `Cmd+Opt+J` Safari จะเป็น `Cmd+Opt+C` อย่าลืมไปเปิดโหมดนักพัฒนาบน Safari ก่อน
+- เครื่องมือนักพัฒนาช่วยให้เราสามารถเห็นข้อผิดพลาด รันคำสั่ง ตรวจสอบตัวแปร และอื่น ๆ ได้อย่างง่ายดาย
+- เราสามารถเปิดเครื่องมือนักพัฒนาโดยใช้ปุ่ม `key:F12` บนเบราว์เซอร์ในระบบปฏิบัติการ Windows สำหรับ Chrome บน Mac ต้องใช้ปุ่ม `key:Cmd+Opt+J` สำหรับ Safari ต้องเปิดใช้งานก่อน และใช้ปุ่ม `key:Cmd+Opt+C`
 
-ทีนี้ปูพื้นเรื่อง environment กันมาสักพักแล้ว ก็พร้อมที่จาวาสคริปต์ออกโรง
+ตอนนี้เราได้เตรียมสภาพแวดล้อมทุกอย่างไว้พร้อมแล้ว ในส่วนต่อไปเราจะเริ่มต้นเขียน JavaScript กัน