ให้เรตสมาชิก: 4 / 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 ตรวจสอบการทำงานของหน้าเว็บ

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีใช้โปรแกรม Weka ในการทำนายข้อมูล
โดย Grammanano ส 07 ธ.ค. 2019 6:54 pm บอร์ด Share Knowledge
0
12
ส 07 ธ.ค. 2019 6:54 pm โดย Grammanano
พื้นฐาน RML เพื่อทำใบปริ้นท์ในระบบ ERP
โดย Grammanano ส 07 ธ.ค. 2019 4:58 pm บอร์ด M098 - อนงค์นาท ไฝขาว
1
8
ส 07 ธ.ค. 2019 5:47 pm โดย Grammanano
แนะนำฟีเจอร์ Coupons ของ MooZiiCart ตัวช่วย ทำ คูปองส่วนลด ในเว็บขายของ สำหรับร้านค้าออนไลน์ ที่จะกระตุ้นยอดขายบางช่วง
โดย prmindphp ส 07 ธ.ค. 2019 3:56 pm บอร์ด MindPHP News & Feedback
0
16
ส 07 ธ.ค. 2019 3:56 pm โดย prmindphp
ใน ปล๊กอิน เราสามารถนำข้อความในไฟล์ภาษาออกมาแสดงได้อย่างไร ครับ
โดย jamepiyawat ส 07 ธ.ค. 2019 2:21 pm บอร์ด Joomla Development
0
12
ส 07 ธ.ค. 2019 2:21 pm โดย jamepiyawat
Block IP เข้าเว็บ เซิร์ฟเวอร์ เป็นข่วง ด้วย .htaccess
โดย mindphp ส 07 ธ.ค. 2019 2:12 pm บอร์ด Linux - Web Server
2
1420
อ 08 ธ.ค. 2019 11:17 am โดย mindphp
ภาพประกอบ Extensions
โดย numtan5839 ส 07 ธ.ค. 2019 11:19 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
2
ส 07 ธ.ค. 2019 11:19 am โดย numtan5839
งานประจำวันที่ 7 ธันวาคม 2562
โดย numtan5839 ส 07 ธ.ค. 2019 10:15 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
8
ส 07 ธ.ค. 2019 7:02 pm โดย numtan5839
งานประจำวันที่ 7 ธันวาคม 2562
โดย Grammanano ส 07 ธ.ค. 2019 10:05 am บอร์ด M098 - อนงค์นาท ไฝขาว
6
26
อ 08 ธ.ค. 2019 4:40 pm โดย mindphp
คำว่า extension ผิดค่ะ
โดย numtan5839 ศ 06 ธ.ค. 2019 8:17 pm บอร์ด MindPHP News & Feedback
1
20
ส 07 ธ.ค. 2019 1:20 am โดย mindphp
ทำอย่างไรให้ google slide นั้นสามารถแสดงหน้าที่เรากำหนดได้ ผ่าน url ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 5:23 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
1425
ส 07 ธ.ค. 2019 5:42 pm โดย numtan5839
การทำนายข้อมูลแบบ Dicision Tree ด้วยโปรแกรม Weka
โดย Grammanano ศ 06 ธ.ค. 2019 5:16 pm บอร์ด Share Knowledge
0
13
ศ 06 ธ.ค. 2019 5:16 pm โดย Grammanano
ทำไม แปลงวันเดือนปีเป็นวันที่ ตามระบบของ Joomla แล้ววันถึงถอยไปวันหนึ่งครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 3:23 pm บอร์ด Joomla Development
1
19
ศ 06 ธ.ค. 2019 4:51 pm โดย thatsawan
คำสั่งพื้นฐานในการใช้ Matlab เพื่อการทำ Image Processing
โดย Grammanano ศ 06 ธ.ค. 2019 3:20 pm บอร์ด Share Knowledge
0
1427
ศ 06 ธ.ค. 2019 3:20 pm โดย Grammanano
Introducing the Module Weather Forcecast.
โดย numtan5839 ศ 06 ธ.ค. 2019 2:34 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
13
ส 07 ธ.ค. 2019 3:25 pm โดย numtan5839
เขียนบทความ แต่พอ save แล้วเนื้อหาไม่แสดง
โดย numtan5839 ศ 06 ธ.ค. 2019 2:30 pm บอร์ด MindPHP News & Feedback
0
14
ศ 06 ธ.ค. 2019 2:30 pm โดย numtan5839
จะทำอย่างไรให้ดึงข้อความ 10 ตัวท้ายได้ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 11:39 am บอร์ด Programming - PHP
3
1428
ศ 06 ธ.ค. 2019 2:04 pm โดย jamepiyawat
จะทำอย่างไรให้ Plugin Content Change Log แสดงข้อความด้านบนได้ ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 11:03 am บอร์ด Joomla Development
1
1424
ศ 06 ธ.ค. 2019 7:42 pm โดย thatsawan
งานประจำวันที่ 6 ธันวาคม 2562
โดย Grammanano ศ 06 ธ.ค. 2019 9:43 am บอร์ด M098 - อนงค์นาท ไฝขาว
5
33
ส 07 ธ.ค. 2019 6:59 pm โดย Grammanano
งานประจำวันที่ 6 ธันวาคม 2562
โดย numtan5839 ศ 06 ธ.ค. 2019 9:34 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
10
33
ศ 06 ธ.ค. 2019 7:42 pm โดย numtan5839
เปิดตัวเว็บบอร์ด รูปแบบใหม่ ของเรา มีอะไรมาใหม่ ลองมาดูกัน เราใช้ phpBB 3.2 นะ
โดย mindphp พ 04 ธ.ค. 2019 7:44 pm บอร์ด MindPHP News & Feedback
1
1441
พ 04 ธ.ค. 2019 8:03 pm โดย thatsawan