เครื่องมือนักพัฒนา

กล่องเครื่องมือในเบราว์เซอร์สำหรับงานเล็กๆ ที่ขัดขวางการทำงานจริง

ปัญหาการเขียนโค้ดส่วนใหญ่นั้นใหญ่และน่าสนใจ แต่ที่ทำให้ช้าลงจริงๆ ไม่ใช่แบบนั้น คุณมี API response ที่บีบอัดอยู่ตรงหน้า JWT ที่อ่านไม่ออก URL ที่ทำให้ query string เสียหาย และ regex ที่เกือบจะทำงานได้แล้ว สิ่งเหล่านี้ไม่สมควรได้ dependency ไม่สมควรติดตั้ง CLI หรือแท็บที่เต็มไปด้วยโฆษณา มันสมควรได้แค่สามสิบวินาทีและกล่องข้อความที่สะอาด

นั่นคือแนวคิดทั้งหมดเบื้องหลังชุดเครื่องมือนี้: หน้าเดียวของโปรแกรมอรรถประโยชน์สำหรับนักพัฒนาที่โหลดทันที ทำงานทั้งหมดในเบราว์เซอร์ของคุณ และไม่เคยขอให้คุณสมัครสมาชิก การจัดรูปแบบ JSON, Base64, การเข้ารหัส URL, การถอดรหัส JWT, การแปลงสี, การทดสอบ regex, การคำนวณ timestamp และการอ้างอิง HTTP status ล้วนอยู่ในที่เดียว คุณหยุดวางข้อมูลลงใน Google ที่ค้นหาได้ก่อน และหยุดสงสัยว่าเว็บไซต์สุ่มนั้นบันทึกไว้หรือไม่

แต่ละเครื่องมือทำอะไรได้บ้าง

ตัวจัดรูปแบบ JSON รับกำแพงของ JSON แบบบีบอัดบรรทัดเดียวและแปลงเป็นสิ่งที่มนุษย์อ่านได้ สมมติว่า webhook ยิงและ log ของคุณบันทึก body ดิบเป็น string ยาวมหาศาล วางลงไป เลือกการย่อหน้าสองหรือสี่ช่อง และคุณจะได้ tree ที่อ่านออกพร้อมชี้บอก syntax error ถ้ามี มันตรวจสอบความถูกต้องขณะจัดรูปแบบ ดังนั้น comma ท้ายที่เกินมาหรือ key ที่ไม่ได้ใส่เครื่องหมายคำพูดจะถูกระบุออกมาแทนที่จะล้มเหลวอย่างเงียบๆ สามชั้นในแอปของคุณ

เข้ารหัส/ถอดรหัส Base64 เป็นเครื่องมือทำงานหนักที่คุณใช้อยู่ตลอดเวลาโดยไม่รู้ตัว Data URI, Basic Auth header, binary blob ที่ยัดอยู่ในไฟล์ config, segment ของ token ล้วนเป็น Base64 ถอดรหัส header value เพื่อยืนยันว่า credential ถูกส่งตามที่คาดหวัง หรือเข้ารหัสภาพขนาดเล็กเพื่อ inline มันไว้ มันจัดการ UTF-8 อย่างสะอาด ซึ่งสำคัญทันทีที่ input ของคุณไม่ใช่ ASCII ธรรมดา

เครื่องมือเข้ารหัส/ถอดรหัส URL แก้ bug คลาสสิกที่ query parameter มีเว้นวรรค เครื่องหมาย & หรือเครื่องหมาย + และทำให้คำขอพัง อย่างเงียบๆ หากคุณสร้างลิงก์ด้วยมือและค่าคือ name=John & Co คุณต้องการให้เครื่องหมาย & นั้น escape เป็น %26 ไม่เช่นนั้น server อ่านมันเป็น parameter separator วาง เข้ารหัส คัดลอก การถอดรหัสทำงานในทิศทางอื่นเมื่อคุณมอง URL ใน log ที่เต็มไปด้วยโค้ด percent และพยายามหาว่าจริงๆ ขอ request อะไร

เครื่องมือ token และข้อควรระวังสำคัญ

ตัวถอดรหัส JWT แยก token ออกเป็นสามส่วนที่คั่นด้วยจุดและแสดง header และ payload เป็น JSON ธรรมดา เมื่อคุณ debug auth นี่คือทอง: ตรวจสอบว่า algorithm ใดเซ็น token อ่าน sub ยืนยันว่า claim exp ยังไม่หมดอายุ และดูว่า scope หรือ role ใดที่ gateway ของคุณส่งให้ client

นี่คือส่วนที่คนลืม การถอดรหัส JWT ไม่ใช่การยืนยัน payload เป็นแค่ Base64url ใครก็ตามที่ถือ token สามารถอ่าน claim ทุกตัวในนั้นได้ และเครื่องมือนี้ทำแค่นั้นและไม่มีอะไรมากกว่า มันไม่ตรวจสอบลายเซ็น ดังนั้น token ที่ถอดรหัสแล้วบอกคุณว่า token พูดว่าอะไร ไม่ใช่ว่ามันของจริงหรือไม่ อย่าเชื่อ claim จากตัวถอดรหัสสำหรับการตัดสินใจ authorization ใดๆ นั่นเป็นหน้าที่ของ server ด้วย signing key ใช้ตัวถอดรหัสเพื่อทำความเข้าใจและ debug ไม่ใช่เพื่อยืนยัน

ตัวทดสอบ regex ปิดฉากบนโปรแกรมอรรถประโยชน์ที่น่าหงุดหงิดที่สุด เขียน pattern ของคุณ วางข้อความตัวอย่างลงไป และดู match ไฮไลต์สดขณะพิมพ์ capture group แสดงรายการออกมา ดังนั้นคุณยืนยันได้ว่า group สองจับปีได้จริงๆ ไม่ใช่ทั้งวันที่ มันดีกว่า cycle แก้ไข-บันทึก-รัน cycle ของการทดสอบ pattern ภายใน codebase จริงของคุณ และเป็นวิธีที่รวดเร็วในการเรียนรู้ว่าทำไม greedy quantifier ถึงกินมากกว่าที่ตั้งใจ

ส่วนที่เหลือ: ตัวแปลง HEX↔RGB เปลี่ยน #1a2b3c เป็น rgb(26, 43, 60) และกลับมาเมื่อ design token และ CSS ของคุณไม่ตรงกัน ตัวแปลง Unix timestamp เปลี่ยน 1718900000 เป็นวันที่และเวลาจริง ซึ่งคุณต้องการทุกครั้งที่ฐานข้อมูลเก็บ epoch second และตาของคุณไม่สามารถอ่านออก และการอ้างอิง HTTP status code ช่วยให้คุณไม่ต้องเดาว่า 422 หรือ 409 เป็นคำตอบที่ถูกต้องเมื่อ API call ผิดพลาด

ประมวลผลในเครื่อง เพื่อให้คุณวางข้อมูลสำคัญได้

นี่คือส่วนที่สำคัญที่สุดสำหรับใครก็ตามที่ทำงานกับข้อมูล production ทุกเครื่องมือที่นี่ทำงาน client-side ใน JavaScript input ของคุณไม่เคยออกจากเบราว์เซอร์ ไม่มีการอัปโหลด ไม่มีการไปกลับยังเซิร์ฟเวอร์ ไม่มีอะไรให้บันทึก ซึ่งหมายความว่าคุณสามารถวาง access token จริงเพื่อตรวจสอบ claim ถอดรหัส Base64 header ที่มี credential หรือจัดรูปแบบ API response ที่เต็มไปด้วยข้อมูลลูกค้าโดยไม่ต้องข้ามเครือข่าย ต้องการหลักฐาน? เปิด dev tool ดูแท็บ network และวางลงไป คุณจะไม่เห็นอะไรส่งออกไป สำหรับ payload ที่ละเอียดอ่อน เครื่องมือที่ทำงานในเครื่องเท่านั้นไม่ใช่แค่ nice-to-have แต่เป็นตัวเลือกที่รับผิดชอบเท่านั้น

คำถามที่พบบ่อย