ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

Chrome developer tools (โครม ดิวิลอปเปอร์ ทูล) เครื่องมือที่ให้สำหรับตรวจสอบ หรือหาจุดบกพร่องของเว็บแอพพลิเคชั่นของเรา

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

             Chrome developer tools เป็นเครื่องมือที่ให้สำหรับตรวจสอบ หรือหาจุดบกพร่องของเว็บแอพพลิเคชั่นของเรา ซึ่งเราสามารถใช้งานเครื่องมือสำหรับนักพัฒนา เพื่อติดตามปัญหา โดยสามารถเลือกเมนู Tools เครื่องมือสำหรับนักพัฒนา หรือกด ctrl + shift + i หรือเพียงกด F12 เพื่อเปิดใช้งาน เครื่องมือ Developer tools

องค์ประกอบของเครื่องมือใน  Chrome developer tools  จะประกอบด้วย

1. Elements (อิลีเม้น) องค์ประกอบหน้าเว็บแอพพลิเคชั่น
2. Resources (รีซอซ) ทรัพยากรระบบต่างๆ
3. Network (เน็ตเวิร์ค) ข้อมูลด้านเครือข่าย
4. Source (ซอสต์) แหล่งที่มา
5. Timeline (ไทม์ไลน์) เส้นแสดงเวลาการทำงาน การประมวลผล การแสดงผล
6. Profile (โปรไฟล์) ข้อมูลส่วนตัว
7. Audits (ออดิด) เครื่องมือตรวจสอบ
8. Console (คอนโซล) คอนโซลตรวจสอบองค์ประกอบ
9. Emulation (อิมูเลชั่น) การจำลองเครื่องมือ และสภาพแวดล้อม
10. Media Queries (มีเดีย คิวรี่) การเรียกใช้งาน และการแสดงลักษณะ Style Sheets (สไตล์ชีต) ของแต่ละขนาดหน้าจอ

             ตัวอย่างเช่น เราต้องการที่จะตรวจสอบการทำงานด้านเครือข่ายบนเว็บแอพพลิเคชั่นของเรา ให้เราเปิดเว็บแอพของเราขึ้นมา จากนั้นเปิด Developer tools เลือกเครื่องมือเป็น network ซึ่งในขณะที่เรากำลังใช้งานในหน้าเว็บเพจอยู่นั้น ในส่วนของ Network ที่เราเปิดแถบไว้ก็จะแสดงผลการทำงานในระบบขึ้นมาให้เราได้ตรวจสอบ

หมายเลข 1 หลังจากกดเข้าสู่ Developer tools แล้วให้กดเลือกเมนู Network

หมายเลข 2 ตรวจสอบการทำงานของหน้าเว็บ

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวัน 19 พฤษภาคม 2561
โดย patcha635 ส 19 พฤษภาคม 2018 7:26 pm บอร์ด M059 - พัชมณ สุวรรณ
0
2
ส 19 พฤษภาคม 2018 7:26 pm โดย patcha635
Re: R - รับค่าจากฟอร์ม รับ Selenium webdirve เพื่อ ทำ automates test ระบบ ERP
โดย rangsan ส 19 พฤษภาคม 2018 7:08 pm บอร์ด M058 - รังสรรค์ มุ่งกลาง
0
2
ส 19 พฤษภาคม 2018 7:08 pm โดย rangsan
ขอใบเสนอราคาของฮาจังนะ
โดย kanchanok ส 19 พฤษภาคม 2018 7:01 pm บอร์ด Mindphp Task (ทดลองงาน)
0
1
ส 19 พฤษภาคม 2018 7:01 pm โดย kanchanok
Q-ปัญหาเพิ่มเติมจากการกด Confiem Order ใน Quotations
โดย Rujikon ส 19 พฤษภาคม 2018 6:58 pm บอร์ด บวรเวชสมุนไพรไทย จำกัด - Tester
0
1
ส 19 พฤษภาคม 2018 6:58 pm โดย Rujikon
B - เอกสารที่ปริ้นออกมาตัวหนังสือทับกัน
โดย kanchanok ส 19 พฤษภาคม 2018 6:32 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ส 19 พฤษภาคม 2018 6:32 pm โดย kanchanok
B - ไม่สามารถกด open Petty Cash ได้
โดย kanchanok ส 19 พฤษภาคม 2018 5:42 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 19 พฤษภาคม 2018 5:42 pm โดย kanchanok
Q-ไม่สามารถกด Confirm Order ในใบ Quotation ได้
โดย Rujikon ส 19 พฤษภาคม 2018 5:30 pm บอร์ด บวรเวชสมุนไพรไทย จำกัด - Tester
0
6
ส 19 พฤษภาคม 2018 5:30 pm โดย Rujikon
ขอตัวอย่าง บันทึกบัญชีจ่ายเงินเดือนค่ะ
โดย thatsawan ส 19 พฤษภาคม 2018 4:39 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
21
ส 19 พฤษภาคม 2018 5:06 pm โดย kanchanok
B - ไม่สามารถ Posted การจ่ายชำระเงินได้
โดย kanchanok ส 19 พฤษภาคม 2018 2:19 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
2
11
ส 19 พฤษภาคม 2018 3:45 pm โดย kanchanok
(Close) B - ไม่สามารถ Validate Supplier Credit Note ได้
โดย kanchanok ส 19 พฤษภาคม 2018 1:58 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
6
ส 19 พฤษภาคม 2018 3:34 pm โดย thatsawan
B - ไม่สามารถเลือก Journal Item ได้
โดย kanchanok ส 19 พฤษภาคม 2018 12:08 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
2
7
ส 19 พฤษภาคม 2018 1:23 pm โดย kanchanok
B-ไม่สามารถส่งอีเมลล์หาลูกค้าใน opportunities ได้
โดย watcharin ส 19 พฤษภาคม 2018 12:04 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
ส 19 พฤษภาคม 2018 12:04 pm โดย watcharin
B - กด Create and View Invoice จาก sale order ไม่ได้
โดย kanchanok ส 19 พฤษภาคม 2018 11:57 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 19 พฤษภาคม 2018 11:57 am โดย kanchanok
B - ไม่สามารถ Posted การรับเงินใน Customer Payments ได้
โดย kanchanok ส 19 พฤษภาคม 2018 11:12 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
6
ส 19 พฤษภาคม 2018 11:12 am โดย kanchanok
การใช้งาน Python GUI( Tkinter ) : วิธีการทำ Default ค่าให้กับ Entry
โดย rangsan ส 19 พฤษภาคม 2018 10:27 am บอร์ด Programming - C/C++ & java & Python
0
19
ส 19 พฤษภาคม 2018 10:27 am โดย rangsan
งานประจำวันที่ 19 พฤษภาคม 2561
โดย Rujikon ส 19 พฤษภาคม 2018 10:17 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
11
อ 20 พฤษภาคม 2018 2:02 am โดย nuattawoot
งานประจำวันที่ 19 พฤษภาคม 2561
โดย rangsan ส 19 พฤษภาคม 2018 10:06 am บอร์ด M058 - รังสรรค์ มุ่งกลาง
1
9
ส 19 พฤษภาคม 2018 6:59 pm โดย rangsan
B - หน้าข้อมูลคนติดต่อ ในแต่ละบริษัท
โดย mindphp ส 19 พฤษภาคม 2018 3:24 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
ส 19 พฤษภาคม 2018 3:24 am โดย mindphp
การเรียงลำดับโมดูลใน Joomla
โดย Parichat ศ 18 พฤษภาคม 2018 8:10 pm บอร์ด Joomla Developing Knowledge
0
16
ศ 18 พฤษภาคม 2018 8:10 pm โดย Parichat
Q - ต้องการที่จะทำการ Set ค่าให้กับตัว Python GUI( Tkinter )
โดย rangsan ศ 18 พฤษภาคม 2018 6:30 pm บอร์ด Programming - C/C++ & java & Python
2
22
ศ 18 พฤษภาคม 2018 7:05 pm โดย rangsan