সিস্টেমজেএসের মতো মডিউল লোডার ব্যবহার করার সময় সাফারির ওয়েব ইন্সপেক্টরটিতে ডিবাগিং


120

আমি একজন তৈরি করছি Ionicব্যবহার অ্যাপ্লিকেশন 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>

উদাহরণ স্ক্রিপ্ট (টাইপস্ক্রিপ্ট):

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

export class ConfigLoader {
    ...
}

ক্রোমে দুর্দান্ত কিছু চলে। তবে, সাফারির ওয়েব ইন্সপেক্টর ব্যবহার করে ডিবাগ করার সময় আমি স্ক্রিপ্টগুলিতে কোনও ব্রেকপয়েন্ট রাখতে পারি না কারণ ওয়েব ইন্সপেক্টর কেবলমাত্র স্ক্রিপ্টগুলি প্রদর্শন করে যা সরাসরি এইচটিএমএল থেকে লিপি করা হয় (স্ক্রিপ্ট ট্যাগের মাধ্যমে), এবং এক্সএইচআর দ্বারা লোড হওয়া স্ক্রিপ্টগুলি না (আমার ক্ষেত্রে, সিস্টেমজেএস দ্বারা) । এর অর্থ আমি নিজের স্ক্রিপ্টগুলি ডিবাগ করতে পারি না, এটি অবশ্যই অগ্রহণযোগ্য।

আমি আগের মতো সিস্টেমজেএস ব্যবহার করে এটি ঘিরে কাজ করার চেষ্টা করেছি, তবে এইচটিএমএলে স্ক্রিপ্ট ট্যাগগুলি রেখেছি:

<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>

তবে এটি কার্যকর হয় না, কারণ সিস্টেমজেএস এ সম্পর্কে খুশি মনে হয় না:

অবৈধ System.register কল। বেনামি System.register কলগুলি কেবলমাত্র সিস্টেমজেএস.আইম্পোর্ট দ্বারা লোড করা মডিউল দ্বারা করা যেতে পারে এবং স্ক্রিপ্ট ট্যাগের মাধ্যমে নয়।

আমি কীভাবে সিস্টেমজেএস ব্যবহার করব এবং একই সাথে সাফারিতে ডিবাগ করার ক্ষমতা রাখব? আমি 'প্রতিটি স্ক্রিপ্টে একটি ডিবাগার স্টেটমেন্ট' রাখার চেয়ে কিছুটা পরিশীলিত সমাধানের সন্ধান করছি ...


4
এটি একটি অদ্ভুত পরামর্শ বলে মনে হতে পারে এবং 11 ই জানুয়ারীর পর থেকেই প্রশ্নটি উন্মুক্ত হয়েছে, তবে আমি আপনাকে সম্ভবত ওয়েবপ্যাকটিতে ডুব দেওয়ার পরামর্শ দিচ্ছি। আমি সিস্টেমজেএসে পড়ছি, তবে এটি আপনার প্রয়োজনীয়তাগুলি আবরণ করবে এমন অনুভূতি পাচ্ছি না।
DevNebulae

দেখে মনে হচ্ছে আপনি যদি এইচটিএমএল এ স্ক্রিপ্টটি বোঝাই না করতে পারেন তবে আপনি ভাগ্যের বাইরে চলেছেন। আপনার দেখা হিসাবে ক্রোমকে একমাত্র ব্রাউজার মনে হয় যা এটি সমর্থন করে।
মাফিন ম্যান


4
debuggerজেএস কীওয়ার্ডটি ব্যবহার করুন
কামিল কিয়েসজেউসকি

4
@ কামিলকিএকজেউউসকি প্রশ্নটি পরিষ্কারভাবে জানিয়েছে যে 'আমি প্রতিটি স্ক্রিপ্টে ডিবাগারের বক্তব্য রাখার চেয়ে' কিছুটা পরিশীলিত সমাধানের সন্ধান করছি ... '
ফিক্কট্রা

উত্তর:


1

ঠিক আছে, আপনি ওয়েব এবং নোডের জন্য শক্তিশালী ডিবাগার সহ ওয়েবস্টোরমের মতো কিছু আইডিই ব্যবহার করতে পারেন ।

উদাহরণ:

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন

আপনি ওয়েবস্টোরম ডিবাগার সম্পর্কে এখানে আরও দেখতে পারেন ।

ওয়েবস্টোরমের জন্য কিছু বিকল্প:

  1. পরমাণু (বিনামূল্যে)
  2. ইন্টেলিজ আইডিইএ (সম্প্রদায়: বিনামূল্যে)
  3. ভিজ্যুয়াল স্টুডিও কোড (বিনামূল্যে)
  4. ...

পিএস: আমি ওয়েবস্টর্মের সাথে আয়নিক এবং প্রতিক্রিয়াযুক্ত অ্যাপ্লিকেশনগুলি বিকাশ করি: ডি


4
আমি ওয়েবস্টর্মে toোকার চেষ্টা করেছি, তবে আমার কাছে ভিএস কোডে এক্সটেনশন সিস্টেমের দ্বারা সরবরাহ করা অনেকগুলি দরকারী বৈশিষ্ট্য রয়েছে যা ওয়েবস্টর্মের কাছে নেই, লাফানো শক্ত is
স্টিফেন এম ইরভিং

0

আপনি কি https://github.com/google/ios-webkit-debug-proxy এর মতো কোনও দূরবর্তী ডিবাগার ব্যবহার করে দেখেছেন ?

এছাড়াও ঘোস্টল্যাব রয়েছে, এখানে https://css-tricks.com/used-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/ শুরু করার জন্য একটি চমৎকার নিবন্ধ


-4

জেএস ফাইল কীওয়ার্ডে লিখুন এবং এক্সপ্লোরারটিতে debuggerখুলুনinspect element

পৃষ্ঠা এবং ডিবাগিং মোড রিফ্রেশ করার সময় ...

উপভোগ কর ;-)


4
প্রশ্নটি পরিষ্কারভাবে বলেছে যে '' প্রতিটি স্ক্রিপ্টে ডিবাগারের বক্তব্য রাখার চেয়ে 'আমি কিছুটা পরিশীলিত সমাধানের সন্ধান করছি ... "
ফিক্কট্রা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.