หมวดหมู่: Christian Heilmann

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

ใน HTML5 คุณสามารถระบุแอตทริบิวต์ `required` เพื่อให้แน่ใจว่ามีการกรอกฟิลด์บางฟิลด์ก่อนที่จะส่งแบบฟอร์มได้

  

  
ฉันได้อ่านข้อกำหนดและเงื่อนไขแล้ว  
	

คุณไปได้ไกลยิ่งขึ้นและกำหนด “รูปแบบ” ที่ค่าของช่องต้องปฏิบัติตามก่อนที่จะส่งออกได้ ตัวอย่างเช่น รายการต่อไปนี้อนุญาตเฉพาะรายการที่เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก a ถึง z ตัวอักษร

  
รหัสผลิตภัณฑ์ (AZ เท่านั้น)  
	

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ MDN และดูตัวอย่างเพิ่มเติมได้

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

  
$('form').submit()
  

คุณสามารถดูได้ที่นี่:

ไม่ว่าในกรณีใด คุณจะต้องตรวจสอบความถูกต้องของข้อมูลที่เข้ามาทางฝั่งเซิร์ฟเวอร์เสมอ และหากจำเป็น ให้ล้างข้อมูล

ส่วนขยาย Edge DevTools สำหรับ Visual Studio Code มีการดาวน์โหลดมากกว่า 1 ล้านครั้ง ใช้เวลาในการสรุปเล็กน้อยว่ามันเป็นอย่างไร

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

วิศวกรคนหนึ่งในทีมของเราแสดงให้ฉันเห็นแนวคิดที่เขามี เนื่องจากทั้งเบราว์เซอร์และตัวแก้ไข (ในกรณีนี้คือ Visual Studio Code) อยู่บนแพลตฟอร์มเดียวกัน (Chromium) จึงเป็นไปได้ที่จะรวมประสบการณ์การดีบักที่สะดวกของเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เข้ากับตัวแก้ไขโดยตรง ไม่เพียงแต่เปลี่ยนสิ่งที่เป็นอยู่ แสดงในเบราว์เซอร์ แต่ยังรวมถึงซอร์สโค้ดที่สร้างด้วย

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

กรอไปข้างหน้าจนถึงตอนนี้และส่วนขยาย DevTools สำหรับ Visual Studio Code เพิ่งทำคะแนนการติดตั้ง 1 ล้านครั้ง

นอกจากนี้เรายังมีผู้ใช้ประมาณ 30,000 รายต่อวันและได้รับ [ข้อเสนอแนะที่ยอดเยี่ยมเกี่ยวกับที่เก็บ GitHub](https://ift.tt/SDne6N3) มากมาย

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

หากคุณยังไม่ได้ลองใช้ส่วนขยาย นี่คือสิ่งที่ได้ผลสำหรับคุณ:

• เน้นปัญหาในโค้ดของคุณพร้อมคำอธิบายว่าปัญหาคืออะไรและจะแก้ไขได้อย่างไร นี่เป็นการถ่ายทอดสด ดังนั้นในขณะที่คุณพัฒนาผลิตภัณฑ์ของคุณ คุณจะได้รับข้อมูลเกี่ยวกับสิ่งที่คุณกำลังทำและสิ่งที่ทำให้เกิดความเสียหาย
  
• แสดงผลิตภัณฑ์ของคุณในการแสดงตัวอย่างเบราว์เซอร์ด้วยตัวเลือกการจำลอง (จำลองอุปกรณ์ต่างๆ โหมดต่างๆ เช่น ความเข้ม/สว่าง/คอนทราสต์สูง) และทดสอบความสามารถในการเข้าถึงบางอย่าง
  
• ซิงค์การเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนา เช่น การแก้ไขปัญหา CSS แบบสดด้วยซอร์สโค้ดของคุณ
  
• เพิ่มคอนโซลสำหรับทดสอบ JavaScript
  
• เพิ่มเครื่องมือแอปพลิเคชันเพื่อตรวจสอบพื้นที่เก็บข้อมูลและบริการที่ทำงานอยู่เบื้องหลัง
• ให้คุณตรวจสอบทราฟฟิกเครือข่ายของผลิตภัณฑ์ของคุณ
• อนุญาตให้ตั้งค่าเบรกพอยต์ในซอร์สโค้ดของคุณและรับดีบักเกอร์ในบริบท

แม้ว่าทั้งหมดนี้จะทำให้นักพัฒนาเว็บในตัวฉันตื่นเต้นมาก PM ในตัวฉันก็มีความสุขมากเกี่ยวกับความหมายของโครงการเครื่องมือสำหรับนักพัฒนา Chromium (ซึ่งใช้งานอยู่ในเบราว์เซอร์ทั้งหมดที่ใช้ Chrome, Microsot Edge, Brave … ) ทั้งหมดขึ้น:

• เราทำความสะอาดฐานโค้ดที่มีอายุมากกว่า 10 ปีเพื่อไม่ให้เป็นกล่องขนาดใหญ่ในเบราว์เซอร์ แต่อนุญาตให้ใช้เครื่องมือต่างๆ ในแอปเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แยกกันได้
• เราได้อัปเกรด screencast ของเบราว์เซอร์ของ Chromium เป็นพาเนลที่สมบูรณ์ภายในโค้ด VS ซึ่งสามารถย้ายไปยังทุกที่ที่คุณต้องการและมีการโต้ตอบทั้งหมดที่คุณมีในหน้าต่างเบราว์เซอร์หลักเมื่อพูดถึงโอเวอร์เลย์และแสดงคุณสมบัติ CSS
• เราได้รวมฟังก์ชันการทำงานของแผงปัญหาเข้ากับโค้ดของคุณเพื่อแสดงการรายงานปัญหาที่เกิดขึ้นจริงรวมถึงความสามารถในการปรับแต่ง

การเรียนรู้มากมายที่เราได้รับจากการเปิดตัวส่วนขยายนี้สามารถย้อนกลับไปยังเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ โดยสิ่งที่ยิ่งใหญ่ที่สุดคือแถบเครื่องมือออกแบบเว็บจำลอง/ตอบสนองใหม่ในหน้าต่างเบราว์เซอร์หลัก

มีอะไรอีกมากมายที่จะได้รับจากการใช้เครื่องมือ Chromium Developer และฝังไว้ในบริบทที่ต่างออกไป และฉันตื่นเต้นมากที่เราสามารถทำได้สำเร็จและไปถึงสถานที่สำคัญแห่งนี้ เพิ่มเติมที่จะมา

เมื่อใช้ส่วนขยาย Microsoft Edge DevTools สำหรับ VS Code คุณจะได้รับการวิเคราะห์โค้ดของคุณและข้อมูลเกี่ยวกับปัญหาด้านการเข้าถึง ความเข้ากันได้ ความปลอดภัย และประสิทธิภาพ คุณลักษณะที่ร้องขออย่างสูงอย่างหนึ่งคือการแก้ไขปัญหาโดยอัตโนมัติหรืออนุญาตให้ผู้ใช้ไม่ต้องรายงานปัญหาใด ๆ อีกเลย นี่เป็นส่วนหนึ่งของส่วนขยายตั้งแต่เวอร์ชัน 2.1.1

นี่คือบทนำ 25 วินาทีสำหรับคุณลักษณะนี้:

ต้องการมากขึ้นหรือมีส่วนร่วม? แจ้งปัญหาใน GitHub

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

ทั้งสองพิมพ์ในปี 1955 และเขาซื้อมันด้วยค่าจ้างครั้งแรกในฐานะคนงานเหมืองถ่านหินอายุ 14 ปี คนหนึ่งเรียกตัวเองอย่างโอ้อวดว่า “ฉันบอกคุณทุกอย่างแล้ว” และอีกคนหนึ่งคือแผนที่โลกและปูม สิ่งเหล่านี้เป็นตัวแทนของความปรารถนาที่จะให้การศึกษาและเดินทางของบิดาข้าพเจ้า ซึ่งเป็นสิ่งที่ท่านแบ่งปันกับแม่อย่างลึกซึ้ง

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

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

กรอไปข้างหน้าเพื่อเรื่องราวของฉัน ฉันมีการศึกษาที่ดี แต่การเข้าถึงสื่อการเรียนรู้นอกเหนือจากที่โรงเรียนมอบให้ในหนังสือที่ขาดรุ่งริ่งและมักจะล้าสมัยหมายถึงการปั่นจักรยานไปที่ห้องสมุดในหมู่บ้านของฉัน หมู่บ้านถัดไป หรือแม้แต่ในเมืองที่อยู่ไกลออกไป คุณต้องรวดเร็วในการสั่งซื้อหนังสือล่วงหน้าที่คุณต้องการหรือต้องการ และห้องสมุดจะไม่โทรหาคุณเมื่อพวกเขาเข้ามา คุณต้องใช้โอกาสนี้ การโทรในประเทศในเยอรมนีไม่ฟรีเหมือนในสหรัฐอเมริกา ห้องสมุดจึงประหยัดเงินได้ ฉันใช้เวลาในวัยเด็กของฉันในการค้นคว้าในห้องสมุดเพราะที่บ้านฉันยังแชร์ห้องกับน้องสาวของฉันซึ่งชอบฟังบันทึก Nena ของเธอซ้ำแล้วซ้ำอีก

ทำงานสื่อ

ฉันได้รับความกระหายในการศึกษาแบบเดียวกันจากพ่อแม่ของฉัน แต่ฉันก็โดดเรียนมหาวิทยาลัยด้วยเพราะว่าเราไม่สามารถจ่ายได้ ดังนั้นฉันจึงเริ่มทำงานทันทีหลังจากเรียนจบระดับ A ฉันต้องไปเกณฑ์ทหาร ซึ่งฉันปฏิเสธและใช้เวลา 15 เดือนทำงานให้กับสภากาชาดแทน และเมื่อกลับมาฉันก็มีโอกาสและสมัครที่สถานีวิทยุท้องถิ่นซึ่งเป็นส่วนหนึ่งของทีมข่าว ฉันมีความสามารถพิเศษด้านคอมพิวเตอร์ โดยใช้เวลาค่อนข้างนานกับพลเรือจัตวา 64 และด้วยเหตุนี้จึงกลายเป็นผู้เชี่ยวชาญในเครือข่ายคอมพิวเตอร์ของสถานีวิทยุ

เข้าสู่ WWW

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

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

เฮ็คดีกว่าห้องสมุดใด ๆ คุณสามารถติดต่อผู้เขียนสิ่งที่คุณบริโภค คุณสามารถอ้างอิงโยงโดยไม่ต้องรวบรวมหนังสือ และที่ดีที่สุดคือ คุณสามารถแก้ไขเนื้อหาบางส่วนและกลายเป็นผู้จัดพิมพ์ด้วยตัวเอง เว็บอ่าน/เขียนจริง

ห้องสมุดทั่วโลกกำลังลุกไหม้

ยกเว้นมันไม่ได้อีกต่อไป เว็บที่เรามีทุกวันนี้อยู่ในสถานะขออภัย ในอีกด้านหนึ่ง เรามี “เว็บโซเชียล” อยู่ในมือของนักการตลาด บอท และการโฆษณาชวนเชื่อทางการเมือง นอกจากการจมลงในมส์ รีโพสต์ และสิ่งตลก ๆ ที่คุณอ่านแล้วในกลุ่มข่าวในปี 2541 ในทางกลับกัน เรามีเว็บสำหรับผู้เผยแพร่หลังจาก 25 ปียังคงไม่สามารถยอมรับแนวคิดที่คุณไม่สามารถควบคุมการแจกจ่ายของคุณ เนื้อหาเมื่อออนไลน์ บนเว็บโซเชียล ความรู้จะถูกบดบังด้วยวาระการประชุมและบนเว็บของผู้เผยแพร่โฆษณาด้วยโฆษณา เพย์วอลล์ และสัญญา เคยพยายามหาข่าวเมื่อ 12 ปีที่แล้วบ้างไหม? ย้อนกลับไปในสมัยห้องสมุดคุณทำได้ ในพอร์ทัลข่าว บทความส่วนใหญ่จะถูกลบออกหลังจากผ่านไปหนึ่งปี และในเว็บไซต์หนังสือพิมพ์ คุณแทบจะไม่สามารถเข้าถึงที่เก็บถาวรได้ แม้จะสมัครรับข้อมูลก็ตาม

ให้ห้องสมุดเว็บเปิดและอยู่ในสภาพที่ดี

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

นี่คือเหตุผลที่ฉันอุทิศอาชีพการทำงานให้กับเว็บ ฉันทำงานเป็นนักพัฒนาเว็บในโครงการขนาดใหญ่และพอร์ทัล ฉันทำงานบนเบราว์เซอร์ มาตรฐาน และ CMS และตอนนี้ฉันทำงานบนเบราว์เซอร์ที่มาพร้อมกับเครื่อง Windows (ส่วนใหญ่ทำงานบน Mac) ฉันได้เขียนและมีส่วนร่วมในหนังสือ 10 เล่ม ฉันเป็นบรรณาธิการด้านเทคโนโลยีมาสองสามฉบับ เขียนถึงนิตยสารออนไลน์และนิตยสารกระดาษหลายสิบฉบับ และเผยแพร่บล็อกนี้ตั้งแต่ปี 2548 โดยไม่มีโฆษณาโดยไม่เสียค่าใช้จ่าย ฉันเป็นนักเขียนอิสระสำหรับ Golem พอร์ทัลไอทีขนาดใหญ่ของเยอรมัน และผู้จัดการผลิตภัณฑ์หลักใน Microsoft ที่ทำงานเกี่ยวกับเครื่องมือเพื่อให้ผู้คนทำสิ่งต่างๆ ได้มากขึ้นบนเว็บ

ฉันไม่คิดว่าทุกคนควรทำสิ่งนี้ แต่ฉันคิดว่าคุณสามารถทำหน้าที่ของคุณได้ ใช้ snopes.com เพื่อตรวจสอบว่าสิ่งที่น่าตกใจที่คุณเพิ่งอ่านนั้นเป็นเรื่องจริงหรือไม่ กล้าโพสต์บางสิ่งที่มีเนื้อหาสาระ แม้ว่าจะไม่ได้สมบูรณ์แบบก็ตาม ชี้ประเด็นของสิ่งที่คุณอ่านและชอบให้กับผู้เขียน อย่าเพิ่งบริโภค จำไว้ว่า ตอนนี้เราสามารถเข้าถึงเว็บที่ไม่มีการกรองซึ่งเต็มไปด้วยเนื้อหาที่น่าทึ่งและสิ่งต่างๆ ให้เรียนรู้ ดังนั้นขอให้ “ฉันบอกคุณทุกอย่าง” นี้ให้อยู่ในสภาพดีและอย่ายอมจำนนต่อการต่อสู้ทางการเมือง การบริโภคที่โจ่งแจ้ง และเวลาและจิตวิญญาณที่ขโมยความธรรมดาไป

เป็นไปได้ที่จะ เปิด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ในเบราว์เซอร์โดยไม่ตั้งใจ ไม่ว่าจะกด F12 เลือกตัวเลือก “ตรวจสอบ” ของเมนูบริบทหรือกดแป้นพิมพ์ลัดตัวใดตัวหนึ่งที่เปิดเครื่องมือต่างๆ

เครื่องมือเหล่านี้อาจดูน่ากลัวและราวกับว่ามีคนกำลังแฮ็กคอมพิวเตอร์ของคุณ โดยเฉพาะอย่างยิ่งเมื่อคุณเห็นเครื่องมือ Console แสดงข้อความแสดงข้อผิดพลาด ข้อมูลเกี่ยวกับการติดตามและการละเมิดความปลอดภัยจำนวนมาก

สำหรับคนที่ถูกตั้งค่าสถานะโดยฮอลลีวูดว่าถูกแฮ็กหมายถึงการเห็นข้อความและหน้าต่างสุ่มจำนวนมากที่ปรากฏขึ้นบนคอมพิวเตอร์ของคุณ สิ่งนี้อาจดูแย่มาก

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

• ช่วยเหลือ – ฉันถูกแฮ็ก
• ผู้คนกำลังสอดแนมฉันโดยใช้เครือข่าย
• มีอุปกรณ์ที่เชื่อมต่อกับคอมพิวเตอร์ของฉัน
• แสดงว่ามีข้อผิดพลาดมากมาย – ฉันทำอะไรผิด?

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

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

เครื่องมือเหล่านี้ ไม่ได้ หมายความว่า:

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

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

หากคุณต้องการคำอธิบายเพิ่มเติมเกี่ยวกับสิ่งต่าง ๆ ที่ทำให้เกิดความสับสน ต่อไปนี้คือบันทึกย่อบางส่วน

เครื่องมือองค์ประกอบ

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

เครื่องมือคอนโซล

เครื่องมือ Console เปรียบเสมือนแผ่นสำหรับนักพัฒนา เมื่อคุณต้องการวิเคราะห์สิ่งที่เกิดขึ้นในโปรแกรมของคุณ คุณสามารถใช้คำสั่งที่เรียกว่า `console.log()` เพื่อเขียนบางอย่างลงไป นี่คือวิธีที่นักพัฒนาค้นพบสาเหตุที่บางอย่างไม่ทำงาน ในขณะที่นักพัฒนาใช้สิ่งนี้ เบราว์เซอร์จะแสดงข้อมูลของมันเมื่อมีบางสิ่งเกิดขึ้น เช่น การตั้งค่าความปลอดภัยและความเป็นส่วนตัวของคุณที่ป้องกันไม่ให้โหลดบางสิ่ง ในฐานะนักพัฒนา เครื่องมือนี้มีประโยชน์อย่างเหลือเชื่อ ในทางเทคนิคแล้ว เราไม่ควรเก็บข้อความใดๆ ไว้บนนั้นเมื่อปัญหาได้รับการแก้ไขแล้ว แต่เช่นเดียวกับ scratchpad คุณมักจะลืมมันไป นั่นเป็นเหตุผลที่ Console เต็มไปด้วยข้อความ เนื่องจากคุณไม่ใช่นักพัฒนาที่รับผิดชอบเว็บไซต์ปัจจุบันที่คุณกำลังดูอยู่ คุณสามารถละทิ้งสิ่งเหล่านี้ได้อย่างปลอดภัยไม่ใช่ปัญหาของคุณ

เครื่องมือเครือข่าย

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

การจำลองอุปกรณ์

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

และนี่คือลักษณะที่ปรากฏบนอุปกรณ์มือถือ ในกรณีนี้คือ iPhone XR:

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

อย่ากลัวเครื่องมือ – เครื่องมือเหล่านี้ช่วยเราสร้างผลิตภัณฑ์เว็บที่ยอดเยี่ยมสำหรับคุณ

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

ทุกเบราว์เซอร์ในทุกวันนี้มาพร้อมกับเครื่องมือสำหรับนักพัฒนาในตัวที่ช่วยให้ผู้คนสร้าง ทดสอบ และแก้ไขผลิตภัณฑ์สำหรับเว็บ คุณสามารถคลิกขวาที่เว็บไซต์และเลือก ‘ตรวจสอบ’ เพื่อไปที่เว็บไซต์นั้น กด ‘F12’ หรือ ‘CMD + Shift + I บน Mac’ หรือ ‘Ctrl + Shift + I’ บน Windows/Linux

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

ฉันทำงานเกี่ยวกับเครื่องมือเหล่านี้ในฐานะผู้จัดการผลิตภัณฑ์ และทุกวันฉันได้รับข้อความตอบกลับประมาณ 20 – 30 ข้อความที่ผู้คนเปิดดูโดยไม่ได้ตั้งใจและมั่นใจว่าพวกเขา “ถูกแฮ็ก”

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

นี่คือเหตุผลที่ฉันรวบรวมคอลเล็กชันนี้พร้อมการสาธิตเพื่อให้คุณเห็นว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คืออะไร: รหัสโกงสำหรับเว็บ

เมื่อฉันดูเว็บโดยรวมและโดยเฉพาะอย่างยิ่ง ให้เรียกว่าเว็บไซต์ “เนื้อหาแนว” ฉันผิดหวังกับวิธีที่เราใช้สื่อนี้ แทนที่จะให้เนื้อหาแก่ผู้คนที่พวกเขาต้องการ เราจะซ่อนโฆษณาที่ล่วงล้ำไปทั่ว ป้องกันไม่ให้ผู้คนใช้เมนูบริบทซึ่งเต็มไปด้วยเครื่องมือเพิ่มประสิทธิภาพการเข้าถึง และทำให้ผู้คนกระโดดข้ามห่วงเพียงเพื่อไปยังเนื้อหาที่พวกเขาพบในเครื่องมือค้นหา

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

ในฐานะเบราว์เซอร์ที่ฉันเลือก ฉันใช้ Microsoft Edge เพราะมันมาฟรีบนเครื่อง Windows ทุกเครื่อง สามารถใช้ได้กับแพลตฟอร์มอื่นๆ ทั้งหมด และฉันทำงานกับมัน คุณสามารถใช้อะไรก็ได้ที่คุณต้องการ และฟังก์ชันส่วนใหญ่ควรมีให้ในเบราว์เซอร์อื่นๆ ด้วย

คำเตือนที่สำคัญอีกประการหนึ่งคือคุณไม่ได้ทำอะไรผิดกฎหมายที่นี่ และไม่สามารถตรวจสอบผลิตภัณฑ์ที่คุณเปลี่ยนตามความต้องการของคุณได้

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

ต่อไปนี้คืองานและวิธีดำเนินการด้วยเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์:

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

คุณมีงานอื่น ๆ ที่คุณต้องการทราบวิธีการทำให้สำเร็จหรือไม่? คุณมีสูตรที่คุณใช้เองหรือไม่? แสดงความคิดเห็นในปัญหาบน “ที่เก็บ GitHub”https://ift.tt/UFCbynw ของสิ่งนี้หรือ ping ฉันบน Twitter

Device Emulation ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์นั้นยอดเยี่ยม แต่ไม่สามารถใช้ได้กับผู้ใช้ทุกคนและอาจจะดีกว่านี้มาก โปรดช่วยเราปรับปรุงมัน

เมื่อเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ออกมาพร้อมกับ Device Emulation และ reponsive design tooling ทุกอย่างก็เปลี่ยนไป

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

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

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

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

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

ไม่ใช่ผู้ใช้การจำลองทุกคนที่เป็นนักพัฒนา

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

ในฐานะ PM ฉัน ได้รับข้อความหลายสิบข้อความต่อวันว่าผู้คนต่างวิตกเกี่ยวกับความซับซ้อนของสิ่งเหล่านั้น และสาเหตุที่มีคน “แฮ็กคอมพิวเตอร์ของฉัน” หรือ “แสดงข้อผิดพลาดมากมายที่ฉันไม่สามารถเกิดขึ้นได้และไม่รู้ว่าต้องทำอย่างไร เกี่ยวกับ”.

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

การจำลองความต้องการสำหรับผู้ที่ไม่ใช่นักพัฒนา

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

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

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

ผู้ใช้เช่นนี้ต้องการมี:

• การจำลองอุปกรณ์ในเบราว์เซอร์โดยไม่ต้องใช้เครื่องมือสำหรับนักพัฒนาที่ใช้พื้นที่มาก
• วิธีง่ายๆ ในการจำลองสถานะต่างๆ ของผลิตภัณฑ์ (โหมดมืด/สว่าง การเชื่อมต่อช้า ประสิทธิภาพของอุปกรณ์ระดับล่าง)
• วิธีง่ายๆ ในการดูอุปกรณ์รอบๆ เนื้อหาและถ่ายภาพหน้าจอของสิ่งนั้น
• วิธีง่ายๆ ในการใส่คำอธิบายประกอบปัญหาที่พบและอาจแจ้งข้อบกพร่องกับทีมพัฒนาของพวกเขา

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

จำลองผู้ใช้ที่ต้องการเล่นเกมเว็บ

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

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

การเปลี่ยนแปลงที่อาจเกิดขึ้นกับประสบการณ์การจำลอง

ความแตกต่างหลักที่ฉันเสนอคือประสบการณ์การจำลองควรเป็นอิสระจากเครื่องมือสำหรับนักพัฒนา

ส่วนขยาย Microsoft Edge สำหรับ Visual Studio Code ปัจจุบันมี screencast พร้อมแถบเครื่องมือของตัวเอง ที่มีฟังก์ชันดังกล่าว นอกจากการเข้าถึงการจำลองที่ง่ายขึ้นแล้ว ยังช่วยให้เห็นผลิตภัณฑ์ในธีมต่างๆ และจำลองปัญหาการช่วยสำหรับการเข้าถึง

Firefox ยังมีแถบจำลองที่พร้อมใช้งานโดยไม่ขึ้นกับเครื่องมือสำหรับนักพัฒนาที่เปิดอยู่

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

ความกังวลเกี่ยวกับการจำลอง

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

นี่เป็นปัญหาโดยเฉพาะอย่างยิ่งกับอุปกรณ์ iOS ซึ่งใช้เอ็นจิ้นการเรนเดอร์และอุปกรณ์จำลองที่แตกต่างกันมักจะทำให้คุณเข้าใจผิดว่าทุกอย่างใช้งานได้ ยิ่งเราเลียนแบบประสบการณ์มากเท่าไหร่ (การจำลองรอยบาก ปัญหาช่องว่างภายใน ข้อบกพร่องที่ล้น ฯลฯ…) เราก็ยิ่งมีแนวโน้มสูงที่จะเกินความเป็นจริงและแสดงผลน้อยไป

เราได้เล่นกับการใช้ประโยชน์จากบางอย่างเช่น Playwright เพื่อแสดงเนื้อหาในอุปกรณ์จำลองโดยใช้เอ็นจิ้นการเรนเดอร์อื่น ๆ แต่ค่าใช้จ่ายค่อนข้างสูง ณ ตอนนี้

ต้องการความช่วยเหลือของคุณ

ฉันได้เผยแพร่ตัว อธิบายเกี่ยวกับ GitHub ซึ่งครอบคลุมสถานการณ์ที่เป็นไปได้ และจะได้รับแนวคิดการออกแบบเพิ่มเติมเร็วๆ นี้ และเรามี ปัญหาเกี่ยวกับ GitHub ติดตามความคืบหน้า ฉันชอบที่จะได้ยินสิ่งที่คุณคิดว่าจะเป็นประสบการณ์ที่ดีกว่าสิ่งที่เรามีในตอนนี้

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

  
var i = 0;
  
การทดสอบฟังก์ชัน (){
  
// ฟังก์ชั่นอื่นๆ
  
ผม++;
  
console.log(i);
  
// ฟังก์ชั่นอื่นๆ
  
}  
	

อย่างไรก็ตาม มีวิธีการที่ดีกว่า คอนโซลของเบราว์เซอร์มีเมธอด `count()` และ `countReset()` ที่เหตุการณ์ใช้ป้ายกำกับ นั่นหมายความว่าคุณสามารถหลีกเลี่ยงโลกได้

  
ฟังก์ชั่นดีกว่าทดสอบ (){
  
console.count('ดีกว่า');
  
}  
	

คุณสามารถดูการทำงานจริงใน screencast นี้

นี่เป็น ส่วนหนึ่งของ Console API มาตรฐาน และควรได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด

เมื่อคุณเขียนไฟล์ markdown หัวเรื่องจะได้รับ ID ที่สร้างขึ้นโดยอัตโนมัติเพื่อให้กลายเป็นเป้าหมายในหน้าที่จะเชื่อมโยง นอกจากนี้ยังใช้เพื่อสร้างสารบัญในระบบการเผยแพร่ต่างๆ

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

ประณีต!

ตอนนี้ฉันกำลังรวบรวมของสำหรับแฟลตใหม่ และฉันก็รู้ว่าการประกอบเฟอร์นิเจอร์ อิเกีย กับการพัฒนาเว็บมีความคล้ายคลึงกันมาก

• คุณได้ชิ้นส่วนที่ดูเหมือนสุ่มมาถุงใหญ่ และคุณควรจัดเรียงชิ้นส่วนเหล่านั้นก่อนที่จะเริ่ม
• ทุกอย่างเป็นมาตรฐานและใช้หน่วยการสร้าง
• คู่มือนี้มีไว้เพื่อให้เข้าใจได้ในระดับสากลและต้องใช้ความพยายามอย่างมากในการทำความเข้าใจ
• การบังคับบางอย่างให้พอดีหมายความว่าคุณทำผิด
• รายการที่เหลือหมายความว่าคุณข้ามขั้นตอน
• คุณสามารถใช้เครื่องมือไฟฟ้าเพื่อเร่งความเร็วของสิ่งต่างๆ ได้ แต่คุณอาจจะทำลายสิ่งต่างๆ ได้หากทำ
• วางแผนที่จะประกอบให้ถูกต้องในครั้งแรก เพราะการแยกชิ้นส่วนจะทำให้คุณแตกหัก
• บางส่วนไม่สามารถประกอบเองได้ – ร่วมมือกับบุคคลอื่นและรับตาที่สองเพื่อป้องกันไม่ให้คุณทำอะไรโง่ ๆ
• สิ่งของต่างๆ จะดูเล็กและจัดการง่ายเมื่อบรรจุในหีบห่อ แต่เมื่อประกอบเข้าด้วยกันแล้ว สิ่งเหล่านี้จะใช้พื้นที่มากขึ้น และเคลื่อนย้ายไปที่อื่นได้ยากขึ้น