การดีบักใน Web Inspector ของ Safari เมื่อใช้ตัวโหลดโมดูลเช่น SystemJS


120

ฉันสร้างIonicapp ที่ใช้es6 modules, TypeScriptและSystemJSเป็นรถตักดินแบบโมดูล นี่คือการตั้งค่าของฉัน:

tsconfig.json:

{
  "compilerOptions": {
    ...
    "target": "es5",
    "module": "system",
    ...
  }
}

index.html:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>

ตัวอย่างสคริปต์ (TypeScript):

import {IConfig} from "./app-config";

export class ConfigLoader {
    ...
}

ทุกอย่างทำงานได้ดีใน Chrome อย่างไรก็ตามเมื่อทำการดีบักโดยใช้ Web Inspector ของ Safari ฉันไม่สามารถวางเบรกพอยต์ในสคริปต์ได้เนื่องจาก Web Inspector แสดงเฉพาะสคริปต์ที่โหลดโดยตรงจาก HTML (ผ่านแท็กสคริปต์) ไม่ใช่สคริปต์ที่โหลดโดย XHR (ในกรณีของฉันโดย SystemJS) . ซึ่งหมายความว่าฉันไม่สามารถดีบักสคริปต์ของตัวเองซึ่งแน่นอนว่าไม่สามารถยอมรับได้

ฉันพยายามแก้ไขปัญหานี้โดยใช้ SystemJS เหมือนก่อนหน้านี้ แต่ยังวางแท็กสคริปต์ใน html เช่น:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
 ... other app scripts
<script>System.import('js/app.js')</script>

อย่างไรก็ตามสิ่งนี้ไม่ได้ผลเนื่องจาก SystemJS ดูเหมือนจะไม่พอใจกับสิ่งนี้:

เรียก System.register ไม่ถูกต้อง การเรียก System.register แบบไม่ระบุชื่อสามารถทำได้โดยโมดูลที่โหลดโดย SystemJS.import เท่านั้นไม่ใช่ผ่านแท็กสคริปต์

ฉันจะใช้ SystemJS ได้อย่างไรและในเวลาเดียวกันจะมีความสามารถในการดีบักใน Safari ได้อย่างไร ฉันกำลังมองหาวิธีแก้ปัญหาที่ซับซ้อนกว่า 'ใส่คำสั่งดีบักเกอร์ในแต่ละสคริปต์' ...


4
นี่อาจเป็นคำแนะนำที่แปลกและเนื่องจากคำถามนี้เปิดให้บริการตั้งแต่วันที่ 11 มกราคม แต่ฉันขอแนะนำให้คุณดำน้ำใน webpack ฉันอ่าน SystemJS มาแล้ว แต่ฉันไม่รู้สึกว่ามันจะครอบคลุมความต้องการของคุณ
DevNebulae

ดูเหมือนว่าหากคุณไม่สามารถโหลดสคริปต์ใน html ได้เหมือนกับที่คุณกำลังทำอยู่คุณก็โชคไม่ดี Chrome ดูเหมือนจะเป็นเบราว์เซอร์เดียวที่รองรับสิ่งนี้อย่างที่คุณเคยเห็น
The Muffin Man


3
ใช้debuggerคีย์เวิร์ด JS
Kamil Kiełczewski

1
@ KamilKiełczewskiคำถามระบุอย่างชัดเจนว่า 'ฉันกำลังมองหาวิธีแก้ปัญหาที่ซับซ้อนกว่า' ใส่คำสั่งดีบักเกอร์ในแต่ละสคริปต์ '... '
fikkatra

คำตอบ:


1

บางทีคุณอาจใช้ IDE เช่นWebStormกับ Debugger ที่แข็งแกร่งสำหรับเว็บและโหนด

ตัวอย่าง:

ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยว WebStorm ดีบักที่นี่

ทางเลือกบางอย่างสำหรับ WebStorm:

  1. Atom (ฟรี)
  2. Intellij IDEA (ชุมชน: ฟรี)
  3. Visual Studio Code (ฟรี)
  4. ...

PS: ฉันพัฒนาแอพ Ionic และ React ด้วย WebStorm: D


1
ฉันพยายามเข้าสู่ Webstorm แต่ฉันมีคุณสมบัติที่มีประโยชน์มากมายจากระบบส่วนขยายใน VS Code ที่ Webstorm ไม่มีมันยากที่จะกระโดด
Stephen M Irving


-4

เขียนลงในคีย์เวิร์ดไฟล์ js debuggerและเปิดinspect elementใน explorer

เมื่อรีเฟรชหน้าและโหมดดีบัก ...

สนุกกับมัน ;-)


3
คำถามระบุอย่างชัดเจนว่า "ฉันกำลังมองหาวิธีแก้ปัญหาที่ซับซ้อนกว่า" ใส่คำสั่งดีบักเกอร์ในแต่ละสคริปต์ "... "
fikkatra
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.