รหัสโกงสำหรับเว็บ – เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์สำหรับผู้ที่ไม่ใช่นักพัฒนา

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

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดใน Microsoft Edge

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

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

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

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

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

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

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

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

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

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

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

ทบทวนการจำลองอุปกรณ์ในเบราว์เซอร์

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

การจำลองอุปกรณ์ที่แสดงบทความ dev.to ภายใน iphone จำลอง

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

การจำลองอุปกรณ์ด้วยเครื่องมือสำหรับนักพัฒนาที่เปิดอยู่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แถบเครื่องมือจำลองใน screencast ส่วนขยาย

แถบเครื่องมือจำลองที่มีอุปกรณ์ต่างๆ ให้จำลอง

แถบเครื่องมือจำลองที่เสนอสถานะต่างๆ ให้ดูตัวอย่าง เช่น โหมดมืดและสว่าง

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

Firefox แสดงแถบเครื่องมือจำลองมือถือ

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

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

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

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

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

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

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

คอนโซลเบราว์เซอร์มีวิธีนับ

นับฟอนนับจาก Sesame Street

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


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

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


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

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

Screencast ของสองวิธีในการนับความถี่ที่เรียกวิธีการเปรียบเทียบ

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

TIL: Visual Studio Code ทำการมาร์กดาวน์อัตโนมัติสำหรับลิงก์ในหน้า

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

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

Visual Studio Code แสดงรายการ ID ที่สร้างขึ้นทั้งหมดของส่วนหัวสำหรับลิงก์ในหน้า

ประณีต!

การพัฒนาเว็บก็เหมือนการประกอบเฟอร์นิเจอร์อิเกีย

ภาพประกอบรูปแบบการสอนของ IKEA แสดงบุคคลที่พยายามประกอบ CSS, HTML และ JavaScript และเรียก MDN เพื่อขอความช่วยเหลือ

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

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

ถ่ายภาพหน้าจอของบริการสตรีมวิดีโอโดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

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

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

สกรีนช็อตโดยใช้เครื่องมือ Elements และเมนูบริบทของโหนด

ในการจับภาพหน้าจอของวิดีโอ คุณสามารถทำได้ดังนี้:

  • หยุดวิดีโอชั่วคราวและรอให้ส่วนควบคุมหายไป
  • เปิดเครื่องมือสำหรับนักพัฒนา (โดยใช้ F12 )
  • ไปที่ เครื่องมือ Elements เปิดใช้งาน Inspector แล้วเลือกวิดีโอ (ซึ่งจะแสดงภาพซ้อนทับสี)
  • เปิดใช้งานเมนูบริบทบน … ของโหนดที่ไฮไลต์ในเครื่องมือ Elements และเลือก “จับภาพหน้าจอโหนด”

รายการเมนูบริบทบนโหนดองค์ประกอบ 'จับภาพหน้าจอโหนด'

และนั่นแหล่ะ นี่คือลักษณะที่ปรากฏเป็น screencast:

การจับภาพหน้าจอของวิดีโอโดยใช้เครื่องมือ Elements

สกรีนช็อตโดยใช้การจำลองอุปกรณ์

หรือคุณสามารถใช้ Device Emulation Tool ได้

  • หยุดวิดีโอชั่วคราวและรอให้ส่วนควบคุมหายไป
  • เปิดเครื่องมือสำหรับนักพัฒนา (โดยใช้ F12 )
  • เปิดใช้งานการจำลองอุปกรณ์
  • เปิดใช้งานเมนู … และเลือก “จับภาพหน้าจอ”

จับภาพหน้าจอรายการในการจำลองอุปกรณ์

คุณสามารถเห็นสิ่งนี้ในการดำเนินการใน screencast ต่อไปนี้

ถ่ายภาพหน้าจอโดยใช้การจำลองอุปกรณ์

ความแตกต่างหลักจากวิธีอื่นคือ จะเป็นการจับภาพหน้าจอที่มีขอบสีดำรอบๆ

แต่มีส่วนขยายเบราว์เซอร์ “Superscreenshotwowtotallylegit” ที่ทำเช่นเดียวกัน!

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

CSS หนึ่งบรรทัดเพื่อเพิ่มโหมดมืด/สว่างพื้นฐาน

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

Codepen แสดงความแตกต่างที่บรรทัดของ CSS สร้าง - นำเสนอหน้าในโหมดมืดและสว่าง

คุณสามารถเห็นมันใน รหัส นี้

ดูปากกา
โครงร่างสี
โดย Christian Heilmann ( @codepo8 )
บน CodePen

คุณยังสามารถใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อ จำลองโหมดต่างๆ เพื่อดูความแตกต่าง

การจำลองโหมดต่างๆ ในเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

อ่านเพิ่มเติมเกี่ยวกับ โครงร่างสี ในเอกสารเว็บ MDN

GitHub Copilot อธิบายโค้ดและแปลจากภาษาหนึ่งเป็นอีกภาษาหนึ่ง

GitHub Copilot เป็นโบลล็อคของสุนัขอยู่แล้ว แต่ฉันเพิ่งติดตั้ง ส่วนขยาย GitHub Labs และกรามของฉันยังเปิดอยู่

คำอธิบายรหัส

วิธีนี้ช่วยให้คุณไฮไลต์โค้ดบางส่วนและรับคำอธิบายเกี่ยวกับหน้าที่ของโค้ดได้:

Screencast แสดงคุณลักษณะคำอธิบายในการดำเนินการ

ตัวอย่างเช่น:


ฟังก์ชัน async downloadZipFile (downloadUrl) {
รอ fs.remove('out/edge');

ไฟล์ const = fs.createWriteStream(‘edge.zip’);
https.get (downloadUrl, ฟังก์ชั่น (ตอบสนอง) {
response.pipe (ไฟล์);
response.on(‘end’, async ()=>{
รอ fs.createReadStream(‘edge.zip’).pipe(unzipper.Extract({เส้นทาง: ‘out/edge/’}));
รอ fs.unlink(‘edge.zip’, () => {} );
const outdir = path.join (__dirname, ‘out’, ‘edge’);
console.log(‘ไฟล์ Edge ถูกแยกไปที่: ${outdir}`);
});
});
}

กลายเป็น:

  1. ก่อนอื่นเราจะลบโฟลเดอร์ ‘out/edge’
  2. เราดาวน์โหลดไฟล์ Edge.zip จากหน้าเผยแพร่ GitHub
  3. เราคลายซิปไฟล์ Edge zip ไปยังโฟลเดอร์ ‘out/edge’
  4. เราพิมพ์ข้อความไปที่คอนโซล

การแปลรหัส

คุณยังสามารถไฮไลต์โค้ดหนึ่งส่วน แล้วโค้ดนั้นจะได้รับการแปลเป็นภาษาอื่น ตัวอย่างเช่น JavaScript เป็น PHP

Screencast ของ GitHub Copilot แปล JavaScript เป็น PHP

ฉันตั้งหน้าตั้งตารอว่าเรื่องนี้จะไปทางไหน!

เราขาดนักพัฒนาหรือข้อสันนิษฐานที่ผิด ๆ ว่างานคืออะไร?

คนงานกำลังเจาะเหล็กเส้น

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

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

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

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

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

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

บางทีเราอาจเปลี่ยนเรื่องนั้นได้โดยการฝึกคนในงานให้ดีขึ้นและลดอุปสรรคในการเข้างานแทน