জাভাস্ক্রিপ্ট সোর্স ম্যাপের ভূমিকা

Ryan Seddon

সতর্কতা: উৎস মানচিত্রের স্পেসিফিকেশন আপডেট করা হয়েছে এবং এই নিবন্ধটি আর আপ টু ডেট নয়। উৎস মানচিত্র কি পড়ুন? সর্বশেষ তথ্যের জন্য।

আপনি কি কখনো আশা করেছেন যে আপনি আপনার ক্লায়েন্ট-সাইড কোডটি পঠনযোগ্য এবং আরও গুরুত্বপূর্ণভাবে ডিবাগযোগ্য রাখতে পারেন এমনকি আপনি এটিকে একত্রিত এবং ছোট করার পরেও, কর্মক্ষমতা প্রভাবিত না করে? ভাল এখন আপনি উত্স মানচিত্রের যাদু মাধ্যমে করতে পারেন.

উত্স মানচিত্রগুলি একটি সম্মিলিত/মিনিফাইড ফাইলকে একটি অনির্মাণ অবস্থায় ফিরিয়ে আনার একটি উপায়। যখন আপনি উত্পাদনের জন্য তৈরি করেন, আপনার জাভাস্ক্রিপ্ট ফাইলগুলিকে ছোট করার এবং একত্রিত করার সাথে, আপনি একটি উত্স মানচিত্র তৈরি করেন যা আপনার আসল ফাইলগুলির তথ্য ধারণ করে৷ আপনি যখন আপনার জেনারেট করা জাভাস্ক্রিপ্টে একটি নির্দিষ্ট লাইন এবং কলাম নম্বর জিজ্ঞাসা করেন আপনি উৎস মানচিত্রে একটি সন্ধান করতে পারেন যা আসল অবস্থানটি ফেরত দেয়। ডেভেলপার টুলস (বর্তমানে ওয়েবকিট রাত্রিকালীন বিল্ড, গুগল ক্রোম, বা ফায়ারফক্স 23+) সোর্স ম্যাপকে স্বয়ংক্রিয়ভাবে পার্স করতে পারে এবং এটিকে এমনভাবে দেখাতে পারে যেন আপনি আনমিনিফাইড এবং আনকম্বাইন্ড ফাইল চালাচ্ছেন।

এটি ব্যবহার করে দেখুন: ডেমো: আসল অবস্থান পান ।

ডেমো আপনাকে উত্পন্ন উত্স ধারণকারী টেক্সটরিয়ার যে কোনও জায়গায় ডান ক্লিক করতে দেয়। "মূল অবস্থান পান" নির্বাচন করুন উৎপন্ন লাইন এবং কলাম নম্বর পাস করে উৎস মানচিত্রটি জিজ্ঞাসা করবে এবং মূল কোডে অবস্থানটি ফিরিয়ে দেবে। নিশ্চিত করুন যে আপনার কনসোল খোলা আছে যাতে আপনি আউটপুট দেখতে পারেন।

বাস্তব বিশ্ব

সোর্স ম্যাপ-এর নিম্নলিখিত বাস্তব জগতের বাস্তবায়ন দেখার আগে নিশ্চিত করুন যে আপনি ক্রোম ক্যানারি বা ওয়েবকিট-এ সোর্স ম্যাপ বৈশিষ্ট্যটি সক্রিয় করেছেন রাত্রিকালীন ডেভ টুলস প্যানেলে সেটিংস কগ-এ ক্লিক করে এবং "উৎস মানচিত্র সক্ষম করুন" বিকল্পটি চেক করে৷

Firefox 23+-এর বিল্ট ইন ডেভ টুলে ডিফল্টরূপে সোর্স ম্যাপ সক্রিয় করা আছে।

কেন আমি উত্স মানচিত্র সম্পর্কে যত্ন করা উচিত?

এই মুহূর্তে সোর্স ম্যাপিং শুধুমাত্র আনকম্প্রেসড/কম্বাইন্ড জাভাস্ক্রিপ্ট থেকে কম্প্রেসড/আনকম্বাইন্ড জাভাস্ক্রিপ্টের মধ্যে কাজ করছে, কিন্তু কফিস্ক্রিপ্টের মতো কম্পাইলড-টু-জাভাস্ক্রিপ্ট ভাষার আলোচনা এবং এমনকি SASS বা LESS-এর মতো CSS প্রিপ্রসেসরের জন্য সমর্থন যোগ করার সম্ভাবনার সাথে ভবিষ্যত উজ্জ্বল দেখাচ্ছে। .

ভবিষ্যতে আমরা সহজেই প্রায় যেকোনো ভাষা ব্যবহার করতে পারব যেন এটি উৎস মানচিত্র সহ ব্রাউজারে স্থানীয়ভাবে সমর্থিত ছিল:

• কফিস্ক্রিপ্ট
• ECMAScript 6 এবং তার পরেও
• SASS/LESS এবং অন্যান্য
• জাভাস্ক্রিপ্টে কম্পাইল করা যে কোন ভাষা

ফায়ারফক্স কনসোলের একটি পরীক্ষামূলক বিল্ডে ডিবাগ করা কফিস্ক্রিপ্টের এই স্ক্রিনকাস্টটি একবার দেখুন:

Google Web Toolkit (GWT) সম্প্রতি সোর্স ম্যাপের জন্য সমর্থন যোগ করেছে। জিডব্লিউটি টিমের রে ক্রোমওয়েল একটি দুর্দান্ত স্ক্রিনকাস্ট করেছেন যা অ্যাকশনে সোর্স ম্যাপ সমর্থন দেখাচ্ছে।

আরেকটি উদাহরণ যা আমি একসাথে রেখেছি তা Google এর Traceur লাইব্রেরি ব্যবহার করে যা আপনাকে ES6 (ECMAScript 6 বা Next) লিখতে এবং ES3 সামঞ্জস্যপূর্ণ কোডে কম্পাইল করতে দেয়। ট্রেসার কম্পাইলার একটি উৎস মানচিত্রও তৈরি করে। উত্স মানচিত্রের জন্য ধন্যবাদ, ব্রাউজারে স্থানীয়ভাবে সমর্থিত হওয়ার মতো ES6 বৈশিষ্ট্য এবং ক্লাসগুলির এই ডেমোটি দেখুন৷

ডেমোতে টেক্সটেরিয়া আপনাকে ES6 লিখতে দেয় যা ফ্লাইতে কম্পাইল করা হবে এবং একটি উত্স মানচিত্র এবং সমতুল্য ES3 কোড তৈরি করবে।

ডেমো: ES6 লিখুন, এটি ডিবাগ করুন, সোর্স ম্যাপিং কর্মে দেখুন

উৎস মানচিত্র কিভাবে কাজ করে?

সোর্স ম্যাপ জেনারেশনের জন্য এই মুহূর্তে একমাত্র জাভাস্ক্রিপ্ট কম্পাইলার/মিনিফায়ার যেটির সমর্থন আছে তা হল ক্লোজার কম্পাইলার। (এটি কীভাবে ব্যবহার করতে হয় তা আমি পরে ব্যাখ্যা করব।) একবার আপনি আপনার জাভাস্ক্রিপ্ট একত্রিত এবং ছোট করে ফেললে, এটির পাশাপাশি একটি উত্স মানচিত্র ফাইল থাকবে।

বর্তমানে, ক্লোজার কম্পাইলার শেষে বিশেষ মন্তব্য যোগ করে না যা একটি উৎস মানচিত্র উপলব্ধ একটি ব্রাউজার ডেভ টুলসকে বোঝাতে প্রয়োজনীয়:

//# sourceMappingURL=/path/to/file.js.map

এটি ডেভেলপার টুলগুলিকে মূল সোর্স ফাইলগুলিতে তাদের অবস্থানে কলগুলিকে ম্যাপ করতে সক্ষম করে৷ পূর্বে মন্তব্য প্রাগমা ছিল //@ কিন্তু এটির সাথে কিছু সমস্যা এবং IE শর্তসাপেক্ষ সংকলন মন্তব্যের কারণে এটিকে //# এ পরিবর্তন করার সিদ্ধান্ত নেওয়া হয়েছিল । বর্তমানে Chrome Canary, WebKit Nightly এবং Firefox 24+ নতুন কমেন্ট প্র্যাগমা সমর্থন করে। এই সিনট্যাক্স পরিবর্তন সোর্স ইউআরএলকেও প্রভাবিত করে।

আপনি যদি অদ্ভুত মন্তব্যের ধারণাটি পছন্দ না করেন তবে আপনি বিকল্পভাবে আপনার সংকলিত জাভাস্ক্রিপ্ট ফাইলে একটি বিশেষ শিরোনাম সেট করতে পারেন:

X-SourceMap: /path/to/file.js.map

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

সোর্স ম্যাপ ফাইলটি শুধুমাত্র তখনই ডাউনলোড করা হবে যদি আপনার সোর্স ম্যাপ চালু থাকে এবং আপনার ডেভ টুল ওপেন থাকে। আপনাকে আপনার আসল ফাইলগুলিও আপলোড করতে হবে যাতে dev সরঞ্জামগুলি প্রয়োজনে সেগুলিকে রেফারেন্স এবং প্রদর্শন করতে পারে৷

আমি কিভাবে একটি উৎস মানচিত্র তৈরি করব?

আপনার জাভাস্ক্রিপ্ট ফাইলগুলির জন্য একটি সোর্স ম্যাপ ছোট করতে, কনক্যাট করতে এবং জেনারেট করতে আপনাকে ক্লোজার কম্পাইলার ব্যবহার করতে হবে। কমান্ডটি নিম্নরূপ:

java -jar compiler.jar \
--js script.js \
--create_source_map ./script-min.js.map \
--source_map_format=V3 \
--js_output_file script-min.js

দুটি গুরুত্বপূর্ণ কমান্ড ফ্ল্যাগ হল --create_source_map এবং --source_map_format । এটি প্রয়োজনীয় কারণ ডিফল্ট সংস্করণটি V2 এবং আমরা শুধুমাত্র V3 এর সাথে কাজ করতে চাই৷

একটি উৎস মানচিত্রের শারীরস্থান

একটি উত্স মানচিত্র আরও ভালভাবে বোঝার জন্য, আমরা একটি উত্স মানচিত্র ফাইলের একটি ছোট উদাহরণ নেব যা ক্লোজার কম্পাইলার দ্বারা তৈরি করা হবে এবং "ম্যাপিং" বিভাগটি কীভাবে কাজ করে সে সম্পর্কে আরও বিশদে ডুব দেবেন৷ নিচের উদাহরণটি V3 স্পেক উদাহরণ থেকে সামান্য ভিন্নতা।

{
    version : 3,
    file: "out.js",
    sourceRoot : "",
    sources: ["foo.js", "bar.js"],
    names: ["src", "maps", "are", "fun"],
    mappings: "AAgBC,SAAQ,CAAEA"
}

উপরে আপনি দেখতে পাচ্ছেন যে একটি উৎস মানচিত্র হল একটি বস্তু আক্ষরিক যাতে প্রচুর সরস তথ্য রয়েছে:

• সংস্করণ নম্বর যে উৎস মানচিত্র বন্ধ ভিত্তিক
• জেনারেট করা কোডের ফাইলের নাম (আপনার মিনিফেড/কম্বাইন্ড প্রোডাকশন ফাইল)
• sourceRoot আপনাকে একটি ফোল্ডার কাঠামোর সাথে উত্সগুলিকে প্রিপেন্ড করতে দেয় - এটি একটি স্থান সংরক্ষণের কৌশলও
• উত্সগুলিতে সমস্ত ফাইলের নাম রয়েছে যা একত্রিত হয়েছিল
• নামগুলিতে সমস্ত পরিবর্তনশীল/পদ্ধতির নাম রয়েছে যা আপনার কোড জুড়ে প্রদর্শিত হয়।
• সবশেষে ম্যাপিং প্রপার্টি হল যেখানে বেস 64 ভিএলকিউ মান ব্যবহার করে ম্যাজিক ঘটে। প্রকৃত স্থান সংরক্ষণ এখানে করা হয়.

Base64 VLQ এবং সোর্স ম্যাপ ছোট রাখা

মূলত, সোর্স ম্যাপ স্পেকের সমস্ত ম্যাপিংয়ের একটি খুব ভার্বোস আউটপুট ছিল এবং এর ফলে সোর্স ম্যাপ জেনারেট করা কোডের আকারের প্রায় 10 গুণ বেশি। সংস্করণ দুই এটিকে প্রায় 50% কমিয়েছে এবং তৃতীয় সংস্করণ এটিকে আবার 50% কমিয়েছে, তাই একটি 133kB ফাইলের জন্য আপনি একটি ~300kB উত্স মানচিত্র সহ শেষ করবেন৷

তাহলে জটিল ম্যাপিং বজায় রেখে তারা কীভাবে আকার কমিয়েছে?

VLQ (পরিবর্তনশীল দৈর্ঘ্যের পরিমাণ) একটি বেস 64 মানের মধ্যে মান এনকোড করার সাথে ব্যবহার করা হয়। ম্যাপিং সম্পত্তি একটি সুপার বড় স্ট্রিং. এই স্ট্রিং-এর মধ্যে সেমিকোলন (;) রয়েছে যা জেনারেট করা ফাইলের মধ্যে একটি লাইন সংখ্যা উপস্থাপন করে। প্রতিটি লাইনের মধ্যে কমা (,) রয়েছে যা সেই লাইনের প্রতিটি অংশকে প্রতিনিধিত্ব করে। পরিবর্তনশীল দৈর্ঘ্যের ক্ষেত্রে এই সেগমেন্টগুলির প্রতিটি হয় 1, 4 বা 5। কিছু লম্বা হতে পারে তবে এর মধ্যে ধারাবাহিকতা বিট রয়েছে। প্রতিটি সেগমেন্ট আগেরটির উপর তৈরি হয়, যা ফাইলের আকার কমাতে সাহায্য করে কারণ প্রতিটি বিট তার আগের সেগমেন্টের সাথে আপেক্ষিক।

উপরে উল্লিখিত হিসাবে, প্রতিটি সেগমেন্ট পরিবর্তনশীল দৈর্ঘ্য 1, 4 বা 5 হতে পারে। এই চিত্রটিকে একটি ধারাবাহিক বিট (g) সহ চারটির একটি পরিবর্তনশীল দৈর্ঘ্য হিসাবে বিবেচনা করা হয়। আমরা এই সেগমেন্টটি ভেঙে দেব এবং আপনাকে দেখাব কিভাবে উৎস মানচিত্রটি আসল অবস্থানের কাজ করে।

উপরে দেখানো মানগুলি সম্পূর্ণরূপে বেস 64 ডিকোড করা মান, তাদের সত্যিকারের মানগুলি পেতে আরও কিছু প্রক্রিয়াকরণ রয়েছে। প্রতিটি সেগমেন্ট সাধারণত পাঁচটি জিনিস কাজ করে:

• উত্পন্ন কলাম
• মূল ফাইল এটি প্রদর্শিত
• মূল লাইন নম্বর
• মূল কলাম
• এবং, যদি পাওয়া যায়, আসল নাম

প্রতিটি সেগমেন্টের একটি নাম, পদ্ধতির নাম বা আর্গুমেন্ট নেই, তাই সেগমেন্ট জুড়ে চার থেকে পাঁচটি পরিবর্তনশীল দৈর্ঘ্যের মধ্যে পরিবর্তন হবে। উপরের সেগমেন্ট ডায়াগ্রামে g মানটিকে একটি ধারাবাহিক বিট বলা হয় যা বেস64 VLQ ডিকোডিং পর্যায়ে আরও অপ্টিমাইজেশনের জন্য অনুমতি দেয়। একটি ধারাবাহিকতা বিট আপনাকে একটি সেগমেন্ট মান তৈরি করতে দেয় যাতে আপনি একটি বড় সংখ্যা সংরক্ষণ না করেই বড় সংখ্যা সংরক্ষণ করতে পারেন, এটি একটি অত্যন্ত চতুর স্থান সংরক্ষণ কৌশল যার মূল মিডি ফরম্যাটে রয়েছে।

উপরের ডায়াগ্রাম AAgBC একবার প্রক্রিয়া করা হলে 0, 0, 32, 16, 1 ফেরত আসবে - 32 হল ধারাবাহিকতা বিট যা 16-এর নিম্নলিখিত মান তৈরি করতে সাহায্য করে। B বিশুদ্ধভাবে বেস64-এ ডিকোড করা হল 1। তাই ব্যবহৃত গুরুত্বপূর্ণ মানগুলি হল 0, 0, 16, 1. এটি তখন আমাদের জানায় যে লাইন 1 (লাইনগুলি সেমি কোলন দ্বারা গণনা করা হয়) জেনারেট করা ফাইলের কলাম 0 ফাইল 0 এ ম্যাপ করে (ফাইলের অ্যারে 0 হল foo.js), কলাম 1 এ লাইন 16।

সেগমেন্টগুলি কীভাবে ডিকোড করা হয় তা দেখানোর জন্য আমি মজিলার সোর্স ম্যাপ জাভাস্ক্রিপ্ট লাইব্রেরি উল্লেখ করব। এছাড়াও আপনি WebKit dev টুলস সোর্স ম্যাপিং কোড দেখতে পারেন, যা JavaScript এও লেখা আছে।

আমরা কীভাবে B থেকে 16 মানটি পাই তা সঠিকভাবে বোঝার জন্য, আমাদের বিটওয়াইজ অপারেটর এবং উত্স ম্যাপিংয়ের জন্য স্পেকটি কীভাবে কাজ করে সে সম্পর্কে প্রাথমিক ধারণা থাকতে হবে। বিটওয়াইজ AND (&) অপারেটর ব্যবহার করে ডিজিট (32) এবং VLQ_CONTINUATION_BIT (বাইনারী 100000 বা 32) তুলনা করে পূর্ববর্তী ডিজিট, g, একটি ধারাবাহিক বিট হিসাবে পতাকাঙ্কিত হয়।

32 & 32 = 32
// or
100000
|
|
V
100000

এটি প্রতিটি বিট অবস্থানে একটি 1 প্রদান করে যেখানে উভয়ই এটি উপস্থিত থাকে। সুতরাং 33 & 32 এর একটি Base64 ডিকোড করা মান 32 ফেরত দেবে কারণ তারা শুধুমাত্র 32 বিট অবস্থান ভাগ করে যেমন আপনি উপরের চিত্রে দেখতে পাচ্ছেন। এটি তারপর বিট শিফট মান 5 দ্বারা পূর্ববর্তী প্রতিটি ধারাবাহিক বিটের জন্য বৃদ্ধি করে। উপরের ক্ষেত্রে এটি শুধুমাত্র একবার 5 দ্বারা স্থানান্তরিত হয়েছে, তাই 5 দ্বারা 1 (B) স্থানান্তর করা হয়েছে৷

1 <<../ 5 // 32

// Shift the bit by 5 spots
______
|    |
V    V
100001 = 100000 = 32

সেই মানটি তারপর একটি VLQ স্বাক্ষরিত মান থেকে রূপান্তরিত হয় ডানদিকে নম্বরটি (32) এক স্থান পরিবর্তন করে।

32 >> 1 // 16
//or
100000
|
 |
 V
010000 = 16

সুতরাং আমাদের কাছে এটি রয়েছে: এভাবেই আপনি 1 কে 16-এ পরিণত করুন। এটি একটি অতিরিক্ত জটিল প্রক্রিয়া বলে মনে হতে পারে, কিন্তু একবার সংখ্যাগুলি বড় হতে শুরু করলে এটি আরও বোধগম্য হয়।

সম্ভাব্য XSSI সমস্যা

স্পেকটি ক্রস সাইট স্ক্রিপ্ট অন্তর্ভুক্তির সমস্যাগুলি উল্লেখ করে যা একটি উত্স মানচিত্রের ব্যবহার থেকে উদ্ভূত হতে পারে। এটি প্রশমিত করার জন্য, এটি সুপারিশ করা হচ্ছে যে আপনি ইচ্ছাকৃতভাবে জাভাস্ক্রিপ্টকে অবৈধ করতে আপনার উত্স মানচিত্রের প্রথম লাইনটি " )]} " দিয়ে প্রিপেন্ড করুন যাতে একটি সিনট্যাক্স ত্রুটি নিক্ষেপ করা হয়৷ WebKit dev টুলগুলি ইতিমধ্যেই এটি পরিচালনা করতে পারে।

if (response.slice(0, 3) === ")]}") {
    response = response.substring(response.indexOf('\n'));
}

উপরে দেখানো হিসাবে, প্রথম তিনটি অক্ষরকে স্লাইস করে চেক করা হয় যে তারা স্পেকের সিনট্যাক্স ত্রুটির সাথে মেলে কিনা এবং যদি তাই হয় তবে প্রথম নতুন লাইন সত্তা (\n) পর্যন্ত সমস্ত অক্ষর সরিয়ে দেয়।

sourceURL এবং displayName অ্যাকশনে: ইভাল এবং বেনামী ফাংশন

সোর্স ম্যাপ স্পেকের অংশ না হলেও নিম্নলিখিত দুটি কনভেনশন আপনাকে ইভাল এবং বেনামী ফাংশনগুলির সাথে কাজ করার সময় বিকাশকে আরও সহজ করার অনুমতি দেয়।

প্রথম সাহায্যকারীটি //# sourceMappingURL প্রপার্টির সাথে খুব মিল দেখায় এবং প্রকৃতপক্ষে সোর্স ম্যাপ V3 স্পেকে উল্লেখ করা হয়েছে। আপনার কোডে নিম্নলিখিত বিশেষ মন্তব্যটি অন্তর্ভুক্ত করে, যা মূল্যায়ন করা হবে, আপনি ইভালদের নাম দিতে পারেন যাতে সেগুলি আপনার ডেভ টুলগুলিতে আরও যৌক্তিক নাম হিসাবে উপস্থিত হয়। CoffeeScript কম্পাইলার ব্যবহার করে একটি সাধারণ ডেমো দেখুন:

ডেমো: sourceURL এর মাধ্যমে স্ক্রিপ্ট হিসাবে eval() 'd কোড শো দেখুন

//# sourceURL=sqrt.coffee

অন্য হেল্পার আপনাকে বেনামী ফাংশনের বর্তমান প্রেক্ষাপটে উপলব্ধ displayName বৈশিষ্ট্য ব্যবহার করে বেনামী ফাংশনের নাম দেওয়ার অনুমতি দেয়। displayName প্রপার্টি অ্যাকশনে দেখতে নিচের ডেমো প্রোফাইল করুন।

এটি ব্যবহার করে দেখুন: ডেমো: ডিসপ্লেনামের মাধ্যমে নামকরণকৃত অ্যানন ফাংশন (শুধুমাত্র ওয়েবকিট নাইটলি)

btns[0].addEventListener("click", function(e) {
    var fn = function() {
        console.log("You clicked button number: 1");
    };

    fn.displayName = "Anonymous function of button 1";

    return fn();
}, false);

dev টুলের মধ্যে আপনার কোড প্রোফাইল করার সময় (anonymous) মত কিছুর পরিবর্তে displayName প্রপার্টি দেখানো হবে। যাইহোক ডিসপ্লেনাম জলে অনেকটাই মৃত এবং এটি ক্রোমে তৈরি করা হবে না। কিন্তু সব আশা হারিয়ে যায় না এবং debugName নামে আরও ভাল প্রস্তাব দেওয়া হয়েছে।

ইভাল নামকরণ লেখার সময় শুধুমাত্র ফায়ারফক্স এবং ওয়েবকিট ব্রাউজারে উপলব্ধ। displayName প্রপার্টি শুধুমাত্র ওয়েবকিট নাইটলিতে আছে।

আসুন একসাথে সমাবেশ করি

বর্তমানে কফিস্ক্রিপ্টে সোর্স ম্যাপ সমর্থন যোগ করার বিষয়ে খুব দীর্ঘ আলোচনা চলছে। সমস্যাটি পরীক্ষা করে দেখুন এবং কফিস্ক্রিপ্ট কম্পাইলারে সোর্স ম্যাপ জেনারেশন যোগ করার জন্য আপনার সমর্থন যোগ করুন। এটি CoffeeScript এবং এর অনুগত অনুগামীদের জন্য একটি বিশাল জয় হবে।

UglifyJS এর ​​একটি উত্স মানচিত্রের সমস্যাও রয়েছে যা আপনাকেও একবার দেখে নেওয়া উচিত।

কফিস্ক্রিপ্ট কম্পাইলার সহ প্রচুর টুল সোর্স ম্যাপ তৈরি করে। আমি এখন এটি একটি মূল পয়েন্ট বিবেচনা.

সোর্স ম্যাপ তৈরি করতে আমাদের কাছে যত বেশি টুল উপলব্ধ থাকবে আমরা ততই ভালো থাকব, তাই এগিয়ে যান এবং আপনার প্রিয় ওপেন সোর্স প্রকল্পে সোর্স ম্যাপ সমর্থন জিজ্ঞাসা করুন বা যোগ করুন।

এটা নিখুঁত না

একটি জিনিস উৎস মানচিত্র এই মুহূর্তে পূরণ করে না ঘড়ি এক্সপ্রেশন. সমস্যাটি হল যে বর্তমান নির্বাহের প্রেক্ষাপটের মধ্যে একটি যুক্তি বা পরিবর্তনশীল নাম পরিদর্শন করার চেষ্টা করা কিছু ফেরত দেবে না কারণ এটি সত্যিই বিদ্যমান নেই। আপনার কম্পাইল করা জাভাস্ক্রিপ্টে প্রকৃত আর্গুমেন্ট/ভেরিয়েবল নামের তুলনায় আপনি যে আর্গুমেন্ট/ভেরিয়েবলটি পরিদর্শন করতে চান তার আসল নাম দেখতে এটির জন্য কিছু ধরণের বিপরীত ম্যাপিং প্রয়োজন।

এটি অবশ্যই একটি সমাধানযোগ্য সমস্যা এবং উত্স মানচিত্রে আরও মনোযোগ দিয়ে আমরা কিছু আশ্চর্যজনক বৈশিষ্ট্য এবং আরও ভাল স্থিতিশীলতা দেখতে শুরু করতে পারি।

ইস্যু

সম্প্রতি jQuery 1.9 সোর্স ম্যাপের জন্য সমর্থন যোগ করেছে যখন অফিসিয়াল CDN-এর বাইরে পরিবেশন করা হয়েছে। এটি একটি অদ্ভুত বাগ নির্দেশ করে যখন IE শর্তসাপেক্ষ সংকলন মন্তব্য (//@cc_on) jQuery লোড হওয়ার আগে ব্যবহার করা হয়। একটি বহু-লাইন মন্তব্যে সোর্সম্যাপিংইউআরএল মোড়ানোর মাধ্যমে এটি প্রশমিত করার জন্য একটি প্রতিশ্রুতি রয়েছে। যে পাঠ শিখতে হবে তা শর্তযুক্ত মন্তব্য ব্যবহার করবেন না।

এর পর থেকে সিনট্যাক্স পরিবর্তন করে //# এ সম্বোধন করা হয়েছে ।

সরঞ্জাম এবং সম্পদ

এখানে আরও কিছু সংস্থান এবং সরঞ্জাম রয়েছে যা আপনার পরীক্ষা করা উচিত:

• নিক ফিটজেরাল্ডের কাছে উৎস মানচিত্র সমর্থন সহ UglifyJS- এর একটি কাঁটা রয়েছে
• পল আইরিশ উত্স মানচিত্র প্রদর্শন একটি সহজ সামান্য ডেমো আছে
• কখন এটি ড্রপ হয়েছে তার ওয়েবকিট চেঞ্জসেট দেখুন
• পরিবর্তনসেটে একটি লেআউট পরীক্ষাও অন্তর্ভুক্ত ছিল যা এই পুরো নিবন্ধটি শুরু করেছে
• বিল্ট-ইন কনসোলে সোর্স ম্যাপের স্থিতিতে মজিলার একটি বাগ রয়েছে যা আপনাকে অনুসরণ করা উচিত
• কনরাড আরউইন আপনার সমস্ত রুবি ব্যবহারকারীদের জন্য একটি সুপার দরকারী উত্স মানচিত্র রত্ন লিখেছেন
• ইভাল নামকরণ এবং ডিসপ্লেনাম বৈশিষ্ট্য সম্পর্কে আরও কিছু পড়া
• সোর্স ম্যাপ তৈরির জন্য আপনি ক্লোজার কম্পাইলার সোর্সটি দেখতে পারেন
• GWT সোর্স ম্যাপের জন্য কিছু স্ক্রিনশট এবং সমর্থনের কথা বলা আছে

উত্স মানচিত্রগুলি একটি বিকাশকারীর সরঞ্জাম সেটের একটি খুব শক্তিশালী ইউটিলিটি। আপনার ওয়েব অ্যাপকে চর্বিহীন কিন্তু সহজেই ডিবাগযোগ্য রাখতে সক্ষম হওয়া খুবই উপযোগী। এটি নতুন ডেভেলপারদের জন্য একটি অত্যন্ত শক্তিশালী শেখার টুল যা দেখতে কিভাবে অভিজ্ঞ devs গঠন করে এবং তাদের অ্যাপগুলিকে অপঠনযোগ্য মিনিফাইড কোডের মধ্য দিয়ে যাওয়া ছাড়াই লিখতে পারে।

আপনি কি জন্য অপেক্ষা করছেন? এখনই সমস্ত প্রকল্পের জন্য উত্স মানচিত্র তৈরি করা শুরু করুন!