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

ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
ภาพประกอบบทความเกี่ยวกับการตรวจสอบการทำงานของเครือข่ายของเว็บแอพพลิเคชั่น
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การทำงานแบบ สืบทอด class บน Python
โดย tatiya อ 14 ส.ค. 2018 7:16 pm บอร์ด Python Knowledge
0
8
อ 14 ส.ค. 2018 7:16 pm โดย tatiya
วิธีลบริ้วรอยด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 7:05 pm บอร์ด Graphic design
0
9
อ 14 ส.ค. 2018 7:05 pm โดย tai14
วิธีสร้างตัวอักษรนูนด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 5:02 pm บอร์ด Graphic design
0
25
อ 14 ส.ค. 2018 5:02 pm โดย tai14
ประโยชน์ของ VPN
โดย anuwat somsakul อ 14 ส.ค. 2018 4:58 pm บอร์ด IOT - Internet of things
0
7
อ 14 ส.ค. 2018 4:58 pm โดย anuwat somsakul
การใช้งาน ตัวแปร golbal บน ภาษา Python
โดย tatiya อ 14 ส.ค. 2018 3:01 pm บอร์ด Python Knowledge
0
3
อ 14 ส.ค. 2018 3:01 pm โดย tatiya
Backup database Mysql
โดย acomscie อ 14 ส.ค. 2018 2:54 pm บอร์ด SQL - Database
0
9
อ 14 ส.ค. 2018 2:54 pm โดย acomscie
วิธีโคลนนิ่งภาพด้วย Photoshop
โดย tai14 อ 14 ส.ค. 2018 12:09 pm บอร์ด Graphic design
0
13
อ 14 ส.ค. 2018 12:09 pm โดย tai14
ตัวช่วยในการแสดงตัวเลขเคลื่อนไหวด้วย Plugin M Animate Number ใน Joomla
โดย Parichat อ 14 ส.ค. 2018 11:10 am บอร์ด PHP News
0
6
อ 14 ส.ค. 2018 11:10 am โดย Parichat
ขอสูตรคำนวณมือ Nper แบบไม่ติด log ค่ะ
โดย pprn อ 14 ส.ค. 2018 10:39 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
12
อ 14 ส.ค. 2018 10:39 am โดย pprn
งานประจำวันที่ 14 สิงหาคม 2561
โดย anuwat somsakul อ 14 ส.ค. 2018 10:27 am บอร์ด M067 - นายอนุวัฒน์ สมสกุล
1
7
อ 14 ส.ค. 2018 7:15 pm โดย anuwat somsakul
งานประจำวันที่ 14 สิงหาคม 2561
โดย prakon อ 14 ส.ค. 2018 10:20 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
15
อ 14 ส.ค. 2018 10:27 am โดย prakon
งานประจำวันที่ 14 สิงหาคม 2561
โดย Lamduan อ 14 ส.ค. 2018 10:16 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
3
อ 14 ส.ค. 2018 10:16 am โดย Lamduan
งานประจำวันที่ 14 สิงหาม 2561
โดย tatiya อ 14 ส.ค. 2018 10:14 am บอร์ด M065 - ตติยะ นาชัย
1
6
อ 14 ส.ค. 2018 7:29 pm โดย tatiya
งานที่ต้องทำประจำวันที่ 14 สิงหาคม 2561
โดย tai14 อ 14 ส.ค. 2018 10:11 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
9
อ 14 ส.ค. 2018 7:27 pm โดย tai14
งานประจำวันที่ 14 สิงหาคม 2561
โดย pprn อ 14 ส.ค. 2018 10:09 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
8
อ 14 ส.ค. 2018 7:23 pm โดย pprn
วิธีกำหนดให้ หลายๆ IP และ Localhost เชื่อมต่อ มาที่ PostgreSQL Server ได้
โดย mindphp จ 13 ส.ค. 2018 6:00 pm บอร์ด PostgreSQL
1
37
จ 13 ส.ค. 2018 8:19 pm โดย ชินวัฒน์ วาทศิลป์
วิธีเมิร์ชเลเยอร์ทั้งหมดในครั้งเดียว ใน Photoshop
โดย anuwat somsakul ส 11 ส.ค. 2018 6:48 pm บอร์ด CSS Knowledge
0
23
ส 11 ส.ค. 2018 6:48 pm โดย anuwat somsakul
การใช้งาน โมดูล radom ในการสุ่มคำ
โดย tatiya ส 11 ส.ค. 2018 6:41 pm บอร์ด Programming - C/C++ & java & Python
0
20
ส 11 ส.ค. 2018 6:41 pm โดย tatiya
รูปแบบการนำส่งข้อมูลภาษีเงินได้หัก ณ ที่จ่ายยื่นด้วยสื่อบันทึกข้อมูลในระบบคอมพิวเตอร์ หรืออินเทอร์เน็ต
โดย thatsawan ส 11 ส.ค. 2018 4:49 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
29
ส 11 ส.ค. 2018 4:49 pm โดย thatsawan
B - ฐานเทส User กด Preferences ระบบแจ้งข้อความ error
โดย rinrada ส 11 ส.ค. 2018 2:46 pm บอร์ด Hachanna - Testter
0
6
ส 11 ส.ค. 2018 2:46 pm โดย rinrada