Chrome กับการใช้ Developer Tools

ปรับปรุง : 2567-11-21 (เพิ่ม default search engine)

มารู้จักกับ Google Chrome

เบราว์เซอร์ หรือ โปรแกรมค้นดูเว็บ (Web Browser) คือ โปรแกรมคอมพิวเตอร์ที่ผู้ใช้ดูข้อมูล และโต้ตอบกับข้อมูลในหน้าเว็บเพจที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล โดยข้อมูลได้รับมาจากการร้องขอ (Request) และตอบกลับ (Response) จากเว็บเซิร์ฟเวอร์ (Web Server)
Google Chrome คือ โปรแกรมบราวเซอร์ (Browser) สำหรับเปิดข้อมูลจากอินเทอร์เน็ตตามมาตรฐาน HTTP ในรูปของข้อความ ภาพ เสียง คลิ๊ปวีดีโอ ลิงค์เชื่อมโยง และรองรับการมีปฏิสัมพันธ์ได้
การใช้ Console.log เบื้องต้น
เมื่อเขียนโค้ดด้วยภาษา HTML แล้วต้องการตรวจสอบการทำงานของโค้ดที่เขียนด้วยภาษา Javascript ที่มักแทรกอยู่ในภาษา HTML สามารถใช้ Developer Tools ใน Chrome ด้วยการกดปุ่ม F12, Ctrl + Shift + I หรือเข้าผ่านปุ่ม Customize and Control google chrome, More tools, Developer Tools ซึ่งคำสั่ง console.log ถูกใช้เพื่อแสดงค่าของตัวแปรใน Console panel เช่น a=1; b=2; console.log(a + b); ผลลัพธ์คือ 3
ตัวอย่าง Source code ของแฟ้ม helloworld.htm
Firefox : Ctrl - Shift - K / Chrome : Ctrl - Shift - I หรือ F12

<body>Hello World
<script>
var hello =[72,69,76,76,79];
console.log(hello); // (5) [72, 69, 76, 76, 79]
console.log(hello[1]); // 69
console.log(String.fromCharCode(hello[1])); // E
console.log("HELLO");
</script>

มีผลวิจัยว่า https ดีสำหรับทุกคนทุกหน้า ของ gmail.com

อ่านเรื่อง https จากเอกสารเมื่อ 12 มกราคม 2010 จาก [googleblog.com] โดย Sam Schillace, Gmail Engineering Director พบว่า Gmail.com เคยมีตัวเลือกให้ใช้ always use https เสมอ ตั้งแต่ปี 2008 เพื่อป้องกันข้อมูลด้วยการเข้ารหัสอีเมล gmail.com ระหว่างเว็บบราวเซอร์กับเครื่องบริการ ผ่านผู้ให้บริการใบรับรอง SSL แม้ SSL จะทำให้ระบบช้าลง แต่การอ้างอิง [รายงานผลวิจัย] ในบล็อกเมื่อ 16 มิถุนายน 2009 สรุปว่า SSL เป็นสิ่งที่ถูกต้องสำหรับทุกคน จึงสรุปว่า "not just at login" ที่อยากแจ้งเพิ่มเติม คือ ถ้าเคยกำหนด Gmail Settings เป็น https จะไม่มีอะไรต้องไปเปลี่ยน แต่ถ้ากังวลเรื่อง Performance สามารถไปเปลี่ยน "Don't always use https" ได้ ถึงอย่างไร Gmail ก็ยังคงรักษาความปลอดภัยการเข้ารหัสในหน้า Login page อ่านเรื่อง Researching the security/latency tradeoff ก็จะพบว่า ต่อไม่จำเป็นต้องพิมพ์ หรือบุ๊คมาร์คเป็น https เพราะจะกำหนดให้เป็น https เสมอ
ขั้นตอน การรับส่งข้อมูลที่มีการเข้ารหัสข้อมูล
1. เครื่องลูกข่าย ร้องขอการเข้าถึงทรัพยากรที่มีการป้องกัน
2. เครื่องบริการ แสดง ใบรับรอง แก่เครื่องลูกข่าย
3. เครื่องลูกข่าย ตรวจสอบใบรับรองของเครื่องบริการ กับผู้ให้บริการใบรับรอง
4. ถ้าตรวจสอบสำเร็จ เครื่องลูกข่ายจะส่งผลการรับรองให้เครื่องบริการ
5. เครื่องบริการตรวจสอบผลการรับรองของเครื่องลูกข่าย
6. ตรวจสอบกันสำเร็จ เครื่องบริการก็จะให้สิทธิ์การเข้าถึงทรัพยากรที่มีการป้องกันกับเครื่องลูกข่าย
ค่าบริการ ของ Truehits Stat
1. Truehits Stat(http) 1 ปี 1,800 บาท, 2 ปี 3,500 บาท
2. Truehits Stat(http) + Web catalog 1 ปี 2,165บาท , 2 ปี 4,000 บาท
3. Truehits Stat(http) + Web catalog + Promote web 1 ปี 2,500บาท , 2 ปี 5,000 บาท
4. Truehits Stat(http+https) 1 ปี 3,600 บาท, 2 ปี 4,200 บาท
5. Truehits Stat(http+https)+ Web catalog 1 ปี 3,965 บาท, 2 ปี 4,700 บาท
6. Truehits Stat(http+https)+ Web catalog + Promote web 1 ปี 4,300 บาท, 2 ปี 5,400 บาท

การกำหนด CSS Style ให้กับ Table

# การกำหนด CSS Style ให้กับ Table
- Chrome Browser คือ เครื่องมือตรวจสอบ Code ของนักพัฒนาเว็บ
- กด Ctrl+Shift+I หรือ F12 ใน Chrome เข้า Developer Tools
- คลิ๊ก Elements เลือกดูรายละเอียดในส่วนต่าง ๆ ของ code ได้
- แต่ละส่วนมี Style ที่ใช้กำหนด สี ขนาด รูปแบบ และทดสอบแก้ไขได้
- ผลการเปลี่ยนแปลง ไม่ทำให้ code ต้นฉบับเปลี่ยนแปลง หากเปลี่ยนถาวรต้องแก้ source code
- [อ่านเพิ่ม chrome-devtools](https://developers.google.com/web/tools/chrome-devtools)
 
# คุณสมบัติต่าง ๆ ที่น่าสนใจ
- ความแตกต่างของ style 3 แบบ เช่น th, #main, .mytable
- การใช้แบบ Inline ขยายการเรียกใช้ class="mytable"
- External CSS styles คือ เรียก CSS จากภายนอก
- Internal CSS Styles คือ เรียก CSS จากภายใน ที่ประกาศไว้ต้นแฟ้ม
- Inline CSS Styles คือ กำหนดเข้าไปใน Tag

การใช้ Developer Tools ทดสอบ Webpage บนอุปกรณ์ต่างขนาด

# Responsive web design
- เทคนิคการเขียนเว็บเพจให้แสดงบนอุปกรณ์ได้หลากหลาย
- การแสดงผลบนอุปกรณ์แต่ละขนาด แสดงผลต่างกัน
- แท็ก div นิยมใช้ในการแบ่งส่วนต่าง ๆ ของเว็บเพจ
- รายละเอียดในแต่ละ class ที่ใช้ในแต่ละ div ต่างกันไปตามอุปกรณ์
- meta viewport เป็นการประกาศว่าเว็บเพจนี้จะทำงานแบบ Responsive
- @media ใช้กำหนดรายละเอียดในแต่ละอุปกรณ์
- [ตรวจสอบขนาดอุปกรณ์ของเรา](http://whatismyscreenresolution.net/)
 
# การเลือกขนาดของอุปกรณ์ใน Chrome
- กด Ctrl+Shift+I เข้า Developer Tools แล้วกด Ctrl+Shift+M เข้า Toggle device toolbar
- Responsive : 400 * 712
- Moto G4/Galaxy S5 : 360 * 640
- Pixel 2 : 411 * 731
- Pixel 2 XL : 411 * 823
- iPhone 5/SE : 320 * 568
- iPhone 6/7/8 : 375 * 667
- iPhone 6/7/8 Plus : 414 * 736
- iPhone X : 375 * 812
- iPad : 768 * 1024
- iPad Pro : 1024 * 1366

การใช้ Developer Tools บน Chrome Browser

Document Type แต่ละรุ่น มีผลต่อ tag ต่างกันไป

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

การใช้ Developer Tools ด้วยการกด F12, Ctrl+Shift+I หรือ เข้า Customize ของ Chrome, More Tools, Developer Tools ใน Tab elements ใช้เครื่องมือ Select an element แล้วใช้ Mouse click ส่วนใดของ content ก็จะแสดง HTML code ในหน้าต่าง Element แล้วจะพบรายละเอียด Style ที่มาจากแฟ้ม CSS หรือที่กำหนดใน HTML code ทำให้ทราบว่าการแสดงผลนั้นมาจาก แฟ้มใด ด้วยคำสั่งใด และสามารถแก้ไขเพื่อทดสอบให้เห็นการเปลี่ยนแปลงได้ทันที ตัวอย่างของช้างเชือกนี้ก็แสดงผลไม่ถูกต้อง ต้องใช้เครื่องมือช่วยวิเคราะห์โค้ด เพราะเมื่อแยกโค้ดไปทดสอบแบบไม่มี Doctype พบว่าถูกต้อง แต่ที่ html.htm ไม่ถูก

elephant.htm แบบที่ไม่เรียบร้อย
doctype.php บริการเลือกแบบเอกสาร แสดงค่าที่แตกต่าง

เช็คประสิทธิภาพของเว็บเพจ (Performance)

# เช็คประสิทธิภาพของเว็บเพจ ด้วย chrome
- กดปุ่ม ctrl+shift+i หรือ F12
- เลือก Performance พบว่ามี 2 บริการให้เลือก คือ 1) Ctrl+E to start a new recording คือ การบันทึกการทำงานต่อเนื่อง จนกว่าจะกดปุ่ม stop 2) Ctrl+Shift+E to record the page load คือ การบันทึกการทำงานจนโหลดเว็บเพจสำเร็จ
- บริการนี้ทำให้ทราบว่า เว็บเพจ โหลดวัตถุใด แต่ละวัตถุใช้เวลาเท่าใด โหลดสคลิ๊ปอะไร จากที่ไหน เวลารวมใช้เวลาเท่าใด แสดงผลการวิเคราห์จำแนกในหลายรูปแบบ
- สามารถดาวน์โหลดบันทึกผลการวิเคราะห์จากการบันทึกต่อเนื่องไว้ในแฟ้ม joom-20200704T093518.json (1.8 MB) และสามารถอัพโหลดแฟ้มกลับเข้ามาใน chrome เพื่อดูผลการวิเคราะห์ได้อีกครั้ง
- ตัวอย่างเว็บเพจ ที่ http://www.thaiall.com/actress/joom.htm
# Page speed อีกเครื่องมือกลุ่มใช้ SEO
- บริการที่ https://developers.google.com/speed/pagespeed/insights/
- ผลการวิเคราะห์จำแนกเป็น Mobile กับ Desktop
- 4 รายการข้อมูลแรกที่น่าสนใจ
1. แสดงเนื้อหาแรก First Contentful Paint (FCP) สำเร็จใน 2.4 s
2. แสดงเนื้อหาสุดท้าย Largest Contentful Paint (LCP) สำเร็จใน 3.7 s
3. เวลานำเข้าข้อมูลแรกเข้า First Input Delay (FID) ใช้เวลา 235 ms
4. ส่งเลเอาท์โดยรวมออก Cumulative Layout Shift (CLS) 0.13 ถือว่าปรับปรุงได้
- อ่านเพิ่ม https://web.dev/optimize-cls/

เช็ครหัสต้นฉบับ และแฟ้มที่ไป download มา (Source)

# ตรวจสอบแฟ้มที่ download ผ่าน webpage
- เปิดเว็บเพจที่ต้องการตาม url เช่น http://www.thaiall.com/actress/joom.htm - กดปุ่ม ctrl+shift+i หรือ F12
- เลือก Sources - พบรหัสต้นฉบับทั้งของแฟ้มเว็บเพจ และแฟ้มที่เกี่ยวข้องทั้งหมด - คลิ๊กชื่อภาพก็จะแสดงภาพเป็น preview ให้ตรวจสอบได้ง่าย

การเรียกใช้ google font : kanit, mitr ในแฟ้ม html

# เรื่อง google font
1. แฟ้ม mitr.htm อยู่ใน local จะไม่เรียก font ไม่ได้ เพราะไปอ้างอิง Resource จากข้างนอก จะฟ้อง has been blocked by CORS policy 
2. แฟ้ม mitr.htm นี้ สามารถเรียก kanit ในเครื่องของผมได้ เพราะติดตั้ง font ไว้ในระบบปฏิบัติการ แต่เปลี่ยนเครื่องจะไม่แสดง font เพราะไม่ได้ติดตั้งในเครื่องอื่น
3. เรียก kanit ใน thaiabc.wordpress.com แล้วเปิดที่เครื่องของผมได้ เพราะติดตั้ง font ไว้ แต่เปิดเครื่องอื่นจะไม่พบ
4. แฟ้ม mitr.htm วางใน thaiall.com แล้วเรียก font ในห้อง /google/fonts พบว่าใช้งานได้ปกติ
5. คำว่า CORS ย่อมาจาก Cross-Origin Resource Sharing เป็นประเด็นที่ป้องกันการเรียกใช้ทรัพยากรข้ามเครื่อง
- ทดสอบที่ http://www.thaiall.com/google/fonts/mitr.htm
- เปิด https://fonts.google.com/specimen/Mitr แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้
- เปิด https://fonts.google.com/specimen/Kanit แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้

บุ๊กมาร์ก (Bookmark)

เครื่องมือเพื่อ "รู้วิธีการจัดระบบ และแบ่งปันทรัพยากร"

บุ๊กมาร์ก (Bookmark) หรือคั่นหน้า คือ เครื่องมือบันทึกที่อยู่เว็บไซต์ (Address) ที่ต้องการบันทึกเก็บไว้ในกรณีพบเว็บไซต์ที่ชื่นชอบ หรือของโปรด (Favorites) และต้องการเข้าถึงครั้งต่อไปได้โดยง่าย ด้วยการสั่งบุ๊คมาร์กเว็บไซต์ หรือตัวระบุแหล่งทรัพยากรสากล (URL = Uniform Resource Locator) เก็บไว้อย่างเป็นระบบบนบราวเซอร์ (Browser) เช่น chrome, opera, safari, firefix, puffin ซึ่งบน Desktop สามารถสั่ง Import หรือ Export bookmarks เพื่อย้ายรายการบุ๊กมาร์กเข้าออกระหว่างเครื่องคอมพิวเตอร์ได้
bookmarks_12_10_20.html
# # # # # # # # # # # # # # # # # # # # # #

การใช้ wix สร้างแอพ

เว็บไซต์ wix.com ให้บริการสร้างเว็บไซต์ และ mobile app ที่สวยงาม กรณีของ lampanghappy.online แสดงผลได้ดีบน mobile device แต่ตำแหน่งมีการเคลื่อนไปบ้างเมื่อแสดงผลบน desktop เมื่อใช้ chrome เปิดตาม url ข้างต้น แบบ responsive เลือก iphone5 หรืออื่น ๆ พบว่า แสดงผลได้ปกติ แต่เมื่อ save as แบบ .mhtml หรือแบบ webpage, complete ก็ยังพบตำแหน่งคลาดเคลื่อน ซึ่งต่างจากที่พบบน mobile device

[introtocomputer] - บทที่ 9 ฝึกใช้โปรแกรมบราวเซอร์

เว็บเบราว์เซอร์ หรือ เบราว์เซอร์ หรือ โปรแกรมค้นดูเว็บ คือ โปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเว็บที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล ที่จัดเก็บไว้ที่เว็บเซอร์วิซหรือเว็บเซิร์ฟเวอร์หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ

เว็บเบราว์เซอร์
ตรวจ cache ของ browser
chrome browser

User : โยนก
ntu_63_busi.pdf
ntu_63_busi_acct.pdf
ntu_63_busi_avia.pdf
ntu_63_busi_business.pdf
ntu_63_busi_cpsc.pdf
ntu_63_busi_mba.pdf
ntu_63_busi_puba.pdf
ntu_63_comm.pdf
ntu_63_dent.pdf
ntu_63_med.pdf
ntu_63_nurse.pdf
ntu_63_pubh.pdf

หัวข้อ (Topics)

รู้จัก Browser

+ เลือกประเด็นที่จะปรับใช้ได้

+ ใช้ Browser ช่วยแก้ไข Webpage ได้

นำเสนอผลงานได้

Kahoot

งานมอบหมาย
+ ฝึกใช้โปรแกรมบราวเซอร์
+ การใช้ developer tool
+ การใช้ console.log

5 Search engine ทางเลือก

คมคิดของ เติ้งเสี่ยวผิง "ไม่ว่าแมวขาวหรือแมวดำ ขอเพียงจับหนูได้ก็คือแมวที่ดี" อาจใช้ไม่ได้กับสถานการณ์ของผม เมื่อต้องการค้นข้อมูลบางอย่างผ่าน Search Engine แล้วไม่พบ ตรวจสอบเครื่องมือที่ใช้สืบค้นพบว่า ไม่ใช้ Search engine ที่เคยใช้ประจำ พบว่า Chrome สามารถกำหนดเปลี่ยนเครื่องมือสืบค้นที่ให้บริการ (Default Search Engine) ได้ ผ่านการตั้งค่า Setting พบ 5 ตัวเลือก เมื่อทดสอบค้นด้วยคำว่า "ประเทศไทย" ได้ผลลัพธ์ (Result) ดังนี้
1. Google.com พบ 153 ล้านรายการ
2. Yahoo.com พบ 62 ล้านรายการ
3. Bing.com พบ 11.6 ล้านรายการ
4. DuckDuckGo.com พบ ผลลัพธ์จำนวนน้อยกว่า แต่มีความเป็นส่วนตัวสูง
5. Baidu.com พบ 29.7 ล้านรายการ
ซึ่งทั้ง 5 บริการนี้ สามารถค้นได้ทั้ง video และ image ส่วน Baidu.com เป็นของจีน แสดงภาษา Chinese (Simplified) หากต้องการแสดงทั้งหน้าเป็นภาษาไทย พบว่าโปรแกรม Chrome มี Settings , Advanced , Language , Offer to translate pages .. ที่บริการ Translate ทั้งหน้าเว็บเพจ เป็น Thai ได้ง่าย

บน chrome เปิดเว็บแล้ว เด้งไปโหมดปลอดภัยตลอด แก้ไขได้

ให้ฝึก add และ delete

การแก้ปัญหาบน chrome ต้องรู้จักคำว่า hsts โดย HSTS (HTTP Strict Transport Security) คือ ความปลอดภัยที่จะช่วยเปลี่ยนที่อยู่เว็บไซต์จาก http เป็น https เสมอ บน chrome สามารถเลือกเพิ่ม หรือลบโดเมนออกจากรายการอัตโนมัตินี้ได้ วิธีแรก ต้องการความปลอดภัย แต่เปิด x.com แล้วไปที่ http://x.com ไม่ปลอดภัยเสมอ ให้ทำดังนี้ เข้า chrome://net-internals/#hsts แล้วพิมพ์ x.com ในช่อง Domain ใต้หัวข้อ Add HSTS domain แล้วกด Add ต่อไปเปิด x.com จะไปที่ https://x.com หรือเปิด https://x.com ครั้งแรก ต่อไปก็จะเข้าโหมดปลอดภัยเสมอ วิธีที่สอง ไม่ต้องการความปลอดภัย แต่เปิด x.com แล้วไปที่ https://x.com พบว่าปลอดภัย ให้ทำดังนี้ เข้า chrome://net-internals/#hsts แล้วพิมพ์ x.com ในช่อง Domain ใต้หัวข้อ Delete domain security policies แล้วกด Delete แล้วเข้า chrome://settings/clearBrowserData แล้วคลิ๊กปุ่ม Clear Data ต่อไปเปิด x.com จะไปที่ http://x.com การ restart chrome จะช่ีวย clear data ที่ค้างได้ วิธีที่สาม ไม่ต้องการความปลอดภัย ไปเปิดใน โหมดไม่ระบุตัวตน (incognito) เปิด http ได้ แม้ในโหมดปกติจะเด้งอัตโนมัติไปที่ https

คลิปเล่าถึงการใช้งาน Chrome ในบทบาทของผู้พัฒนา

พบคลิปเล่าเรื่องการใช้ Chrome ในมุมมองของ Developer Tools
ใน morioh.com ได้จำแนกรายการ ตาม Timeline ดังนี้
0:35 Open web developer tools
0:50 Window stacking
1:14 Inspect elements
1:35 Scroll into view
2:00 Edit HTML (edit/hide/remove)
2:35 Edit CSS
3:40 Box model
4:04 Color picker
4:40 Pseudo classes
5:30 Mobile device simulation
5:48 Show/hide device frame
5:55 Orientation
6:03 Touch/swipe
6:23 List of devices
6:33 Responsive size
6:45 Media queries
7:20 Zooming / pinching
7:40 Sensors / location / orientation
8:35 Network
9:03 DOMContentLoaded
9:50 Resource filtering
10:05 File browsing
10:30 Pretty print
10:50 Quick file switching
11:07 Multicoursor
11:15 (Select/find) next occurrence
11:35 Debugger
12:20 Break on HTML
13:00 Shadow DOM
13:50 Bottle necks
14:50 Console
15:25 Preserve log
15:55 Network throttling
16:25 Document query selectors
17:00 Assign node to variable
17:40 Path to the node
18:22 Clear/browser storage (cookies/local storage/cache)
18:45 Manifest files / service workers
19:05 Performance measurement
morioh.com/p/6a1660f53029

GoFullPage

GoFullPage คือ แอปพลิเคชันที่ทำงานบน Google Chrome หรือเรียกว่าส่วนขยายของโครม (Chrome Extension) มีความสามารถในการจับภาพหน้าจอเว็บเพจที่อยู่บน Current Display ไปบันทึกเป็น PDF File หรือ Image File กรณีเป็น PDF จะบันทึกแบบ Split ออกเป็น Page ตามขนาดกระดาษ หรือเลือก Full image จากตัวเลือก กรณีเป็นภาพจะบันทึกเป็นภาพเดียวเหมือนที่เห็นใน Preview ได้ทันที แต่ถ้าข้อมูลในเว็บเพจมีเนื้อหามาก ระบบจะแจ้งว่าภาพจะถูกแบ่งตามความเหมาะสม อาจแบ่งเป็น 2 หรือ 3 ภาพได้
คลิ๊กใน Chrome เพื่อติดตั้ง GoFullPage Extension
ส่วนบริการที่ webtopdf.com หรือ sejda.com คือ บริการออนไลน์เพื่อจับภาพหน้าจอเว็บเพจ (Webpage) ไปบันทึกเป็น PDF File ซึ่งระบบใช้ Google's Chromium project บนเครื่องบริการ ทำการแปลงเป็น PDF File ซึ่งผลของ webtopdf.com จะได้ขนาดของ PDF File ที่เล็กกว่า แล้วสามารถกำหนดรายละเอียด (Option : Custom) ก่อนเริ่มต้น Convert ได้
เปรียบเทียบขนาดแฟ้ม PDF ที่ได้จากบริการของ 3 เว็บไซต์

ตัวอย่าง sejda_seo.pdf ที่ใช้ Sejda.com - 1,647 KB
ดิไอคอน

ตัวอย่าง webtopdf_seo.pdf ที่ใช้ WebtoPDF.com - 1,705 KB
ดิไอคอน

ตัวอย่าง gofullpage_seo.pdf ที่ใช้ GoFullPage - 2,196 KB

ระบบสร้างเอกสาร แผนที่กินดี นั่งอ่าน แผนที่กินดี ของลำปาง จากกูเกิล พบว่า มีที่กิน มีที่ดื่ม มีกว่า 199 ร้าน มีร้าน Fika cafe ที่ผมเคยไปก็หลายครั้ง พี่เค้าใจดี เคยชวนผมถ่ายภาพ มีผมเป็นนายแบบ ในร้านมีขนม นม เนย ชา กาแฟ หอมกรุ่น ไปตามหาอ่าน #คำแนะนำร้าน ได้ครับ วันนี้ มีโอกาสพัฒนา #ระบบสร้างเอกสาร โดยใช้ข้อมูลร้านนี้ เป็นกรณีที่ 3
พบปัญหาที่คาดไม่ถึง ในระหว่างทดสอบ คือ โค้ดไม่โหลด แฟ้มรูปแบบตัวอักษร ที่ใช้การนำแฟ้ม TTF เข้ามาใช้งาน เตรียม font ให้เลือก 4 แบบ แต่พบปัญหากับตัวอักษร 2 แบบ ปัญหาที่พบ มีกรณีเดียว คือ ขณะใช้ chrome บนโหมดปกติ แล้วฟอนต์ไม่เปลี่ยน หรือไม่โหลด ทำให้ layout ไม่เป็นไปตามที่กำหนด
สรุปวิธีแก้ไข คือ อัพเดท chrome เพราะรุ่นที่ใช้อยู่เก่าล่ะ ส่วนใน stack เค้าบอกว่าให้ถอยหลัง ก็เป็นอีกวิธีแก้ปัญหาที่น่าสนใจ
☸ ระบบสร้างเอกสาร Fika cafe
☸ บนเพจ Fika cafe

Adobe Acrobat: PDF edit, convert, sign tools เครื่องมือช่วยเปิดแฟ้ม PDF และ edit ได้

ใช้เวลาโหลดเว็บเพจ = 190 มิลลิวินาที ความสูง = 5545 จุด ความกว้าง = 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com