ดาวน์โหลด console importer - console importer ดาวน์โหลดซอร์สโค้ด

console importer

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

ผู้นำเข้าคอนโซล

สาธิต

การติดตั้ง

ติดตั้งจาก Chrome เว็บสโตร์:

https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie

การใช้งาน

เปิดคอนโซล Chrome devtools ฟังก์ชันชื่อ $i สามารถใช้เพื่อนำเข้าทรัพยากร JavaScript และ CSS

 $i ( 'jquery' )

นำเข้าเวอร์ชันเฉพาะ:

 $i ( 'jquery@2' )

นอกจากนี้ คุณยังสามารถนำเข้า URL สคริปต์ที่ถูกต้องได้:

 $i ( 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' )

รองรับ CSS เช่นกัน:

 $i ( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' )

นำเข้าโมดูล ES

โมดูล ES ได้รับการรองรับอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่ วิธีการ $i.esm มีประโยชน์ในกรณีนี้:

 d3 = await $i . esm ( 'd3' )

หรือระบุรุ่น:

 d3 = await $i . esm ( 'd3@7' )

ข้อดีของแนวทางนี้คือไม่มีการเพิ่มตัวแปรส่วนกลางลงในหน้าต่าง ซึ่งช่วยให้ควบคุมขอบเขตของผลข้างเคียงได้ดีขึ้น สำหรับรายละเอียดเพิ่มเติม ดู https://esm.run

การแก้ไขปัญหา

ถาม: `$i` ไม่ทำงานตามที่คาดไว้

บางเว็บไซต์ เช่น Google Inbox มี $i ใช้เป็นตัวแปรร่วมอยู่แล้ว ส่วนขยายนี้ไม่ได้เขียนทับ

คุณสามารถใช้ console.$i บนเว็บไซต์เหล่านี้

ถาม: `$i` ไม่สามารถนำเข้าทรัพยากรได้

ในบางเว็บไซต์ เช่น GitHub $i จะไม่สามารถนำเข้าทรัพยากรได้ ข้อผิดพลาดของคอนโซลอาจเป็นดังนี้:

 # js errors example
Refused to connect to ' https://api.cdnjs.com/libraries?search=jquery ' because it violates the following Content Security Policy directive:

# css errors example
Refused to load the stylesheet ' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ' because it violates the following Content Security Policy directive:

เป็นเพราะนโยบายการรักษาความปลอดภัยของเนื้อหาที่เข้มงวดของเว็บไซต์เหล่านี้ สำหรับข้อมูลเพิ่มเติม โปรดดูที่วิกินโยบายความปลอดภัยของเนื้อหา (CSP)