কিভাবে Chrome এ কোড থেকে একটি জাভাস্ক্রিপ্ট ব্রেকপয়েন্ট সেট করবেন?


686

আমি ক্রোম ডিবাগারকে কোডের মাধ্যমে একটি লাইন ভেঙে দিতে বাধ্য করতে চাই , বা অন্যথায় এমন কোনও মন্তব্য ট্যাগ ব্যবহার করে console.break()


46
আপনি কি debugger;বিকাশকারী সরঞ্জামদণ্ডে নিয়মিত ব্রেকপয়েন্ট ব্যবহার করে চেষ্টা করেছেন ?
দিয়াও

আপনি কোডটিকে বিকাশকারী সরঞ্জামগুলিতে স্ক্রিপ্ট প্রহরী ব্যবহার করে সেট করার পরিবর্তে নিজে থেকেই ব্রেকপয়েন্টগুলি সেট করতে চান?
ফারিস এম


9
সদৃশ নয়। "ক্রোমে" বনাম "কোডে" দুটি ভিন্ন জিনিস এবং এই প্রশ্নটি অনেকগুলি এক্স-এইচআর-র পরিস্থিতিতে প্রযোজ্য। হ্যাঁ অন্য প্রশ্নের উত্তরগুলির মধ্যে 1 এই প্রশ্নের উত্তর দেয়, তবে অন্যগুলি প্রযোজ্য নয়। আমি আক্ষরিকভাবে "কোড ক্রোম থেকে জাভাস্ক্রিপ্ট ব্রেকপয়েন্ট সেট করলাম" এবং এটি প্রথম ফলাফল এবং অন্য প্রশ্নটি এমনকি প্রথম পৃষ্ঠায় নেই।
অ্যারোনলএস

উত্তর:


1158

আপনি debugger;আপনার কোডের মধ্যে ব্যবহার করতে পারেন । যদি বিকাশকারী কনসোলটি খোলা থাকে তবে মৃত্যুদন্ড কার্যকর হবে। এটি ফায়ারব্যাগেও কাজ করে।


8
একটি দুর্দান্ত কৌশলটি কয়েক সেকেন্ড পরে ডিবাগারটি ট্রিগার করা:setTimeout(function(){debugger;}, 3000);
শাহার

30
টাইমার ট্রিক কি সাধারণ অভ্যাস? যাচাইকরণ / আত্মপক্ষ সমর্থন?
জাস্টাস এপেন

4
এটি খুব সহায়ক। নোটটি debugger;সমস্ত বড় ব্রাউজারে সমর্থিত। আরও তথ্যের জন্য: w3schools.com/jsref/jsref_debugger.asp
স্কটিটিজি

16
@ স্কটিটি এমডিএন কম চকচকে, আরও দরকারী: ডেভেলপার.মোজিলা.আর.ইন-
ইউএস

@ জাস্টুসএপেন সমস্যাটি হচ্ছে জাভাস্ক্রিপ্টটি একক থ্রেডযুক্ত, সুতরাং এটি চলমান কোডটিকে বাধাগ্রস্ত করতে পারে না।
ভিট্রুভিয়াস

27

শ্রোতাদের একটি বোতাম সেট আপ করুন এবং কল করুন debugger;

উদাহরণ

$("#myBtn").click(function() {
 debugger;   
});

ডেমো

http://jsfiddle.net/hBCH5/

জাভাস্ক্রিপ্টে ডিবাগ করার উপর সংস্থানসমূহ


1
এটি ক্লিক হ্যান্ডলারের একটি ব্রেকপয়েন্ট নির্ধারণ করে, সম্ভবত ওপি যা চেয়েছিল তা নয়
ᆼ ᆺ ᆼ

@ পিটারভি আমার পক্ষে দরকারী হবে যদি আমি কেবল নিজের কোডটি এমন কোনও জায়গায় খোলার চেষ্টা করতাম যা আমি যে কোডের সাথে ব্লক করছিলাম তার ব্লকের কাছে ছিল ... তবে সারাক্ষণ ডিবাগ করতে চাইনি ... তবে হ্যাঁ , যদি এটি কেবল ডিবাগারটি খোলার জন্য ... তবে তার জন্য একটি কী রয়েছে।
আর্মস্ট্রোনস্ট

27

debug(function)যখন functionডাকা হয় তখন আপনি ব্রেক করতেও ব্যবহার করতে পারেন ।

কমান্ড লাইন এপিআই রেফারেন্স: ডিবাগ


2
খুব সুন্দর - কেবলমাত্র এই মুহুর্তে ক্রোম হিসাবে উপস্থিত হতে পারে তবে এটি আমার প্রাথমিক প্ল্যাটফর্ম। এখন আমার বিশ্বব্যাপী ডিবাগিং পতাকাটিকে "ডিবাগ" বলা বন্ধ করা এখনই মনে রাখা দরকার ...
ব্রিচিনস

ক্রোম ডিবাগার কমান্ড লাইন এপিআই রেফারেন্সটিতে আসলে আমি জানতাম না এমন কিছু অন্যান্য বেশ কিছু সহায়ক জিনিস রয়েছে। ধন্যবাদ!
পিটার টি।

16

অন্যরা ইতিমধ্যে বলেছে, debugger;যাওয়ার উপায় is আমি একটি ছোট স্ক্রিপ্ট লিখেছিলাম যা আপনি ব্রাউজারে কমান্ড লাইন থেকে ফাংশন কলের ঠিক আগে ব্রেকআপপয়েন্ট সেট করতে এবং অপসারণ করতে ব্যবহার করতে পারেন: http://andrijac.github.io/blog/2014/01/31/javascript-breakPoint/


8

"স্ক্রিপ্টস" ট্যাবে আপনার কোডটি যেখানে যান। লাইন নম্বরটির বাম দিকে, ক্লিক করুন। এটি একটি ব্রেকপয়েন্ট সেট করবে।

স্ক্রীনশট:

ক্রোমে ব্রেকপয়েন্টের স্ক্রিনশট

তারপরে আপনি ডান ট্যাবটির মধ্যে আপনার ব্রেকপয়েন্টগুলি ট্র্যাক করতে সক্ষম হবেন (স্ক্রিনশটটিতে দেখানো হয়েছে)।


41
এই প্রশ্নের উত্তর না পান তবে তিনি এটা করতে সক্ষম হতে চায় কোড
robertc

39
xn .: "এখানে আমার উত্তরের একটি চিত্র রয়েছে, যখন 0 টি ভোট দিয়ে সবেমাত্র ছোট্ট শিশু ছিল It's এখন সব বড় হয়েছে" "
অ্যারোনলএস

3
আপনি যদি একটি জ্যাক্স স্ক্রিপ্টটি অ্যাজাক্স কল দিয়ে লোড করেন তবে এটি এখানে প্রদর্শিত হবে না, সুতরাং কোডে ব্রেকপয়েন্টের প্রয়োজন।
পেট্রুজা

@ ফ্লোরিয়ানমারগাইন, আর কোনও স্ক্রিপ্ট ট্যাব নেই। ছবিটি আপডেট করুন।
পেসারিয়ার

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

7

debugger ইকোস্ক্রিপ্ট দ্বারা সংরক্ষিত কীওয়ার্ড এবং ES5 সাল থেকে দেওয়া optionচ্ছিক শব্দার্থক

ফলস্বরূপ, এটি কেবল ক্রোমই নয়, ফায়ারফক্স এবং নোড.জেএস এর মাধ্যমেওnode debug myscript.js ব্যবহার করা যেতে পারে ।

মান বলছেন :

বাক্য গঠন

DebuggerStatement :
    debugger ;

শব্দার্থবিদ্যা

ডিবাগারস্টেটমেন্ট উত্পাদনের মূল্যায়ন কোনও ডিবাগারের অধীনে চলাকালীন কোনও প্রয়োগকে ব্রেকপয়েন্টের কারণ হতে পারে। যদি কোনও ডিবাগার উপস্থিত না থাকে বা সক্রিয় না থাকে তবে এই বিবৃতিটির কোনও পর্যবেক্ষণযোগ্য প্রভাব নেই।

প্রোডাকশন ডিবাগারস্টেটমেন্ট: ডিবাগার; নিম্নলিখিত হিসাবে মূল্যায়ন করা হয়:

  1. যদি কোনও বাস্তবায়িত সংজ্ঞায়িত ডিবাগিং সুবিধা উপলব্ধ থাকে এবং সক্ষম হয়, তবে
    1. একটি বাস্তবায়ন সংজ্ঞায়িত ডিবাগিং ক্রিয়া সম্পাদন করুন।
    2. ফলাফলটি একটি বাস্তবায়ন সংজ্ঞায়িত সমাপ্তি মান হতে দিন Let
  2. আর
    1. ফলাফল (আসল, খালি, খালি) হতে দিন।
  3. রিটার্ন ফলাফল।

ES6 এ কোনও পরিবর্তন নেই।


3

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

বিভাগ 2 দেখুন

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

বা কেবল প্রয়োজনীয় কোড পয়েন্টে আপনার কোডে ডিবাগার শব্দটি যুক্ত একটি লাইন যুক্ত করুন।


3

ব্রেকপয়েন্ট: -

ব্রেকপয়েন্টটি কার্যকর করা বন্ধ করবে এবং আপনাকে জাভাস্ক্রিপ্টের মানগুলি পরীক্ষা করতে দেবে।

মানগুলি পরীক্ষা করার পরে, আপনি কোডটির সম্পাদন পুনরায় শুরু করতে পারেন (সাধারণত প্লে বোতামের সাহায্যে)।

ডিবাগার: -

ডিবাগার; জাভাস্ক্রিপ্ট, এবং কলস্টে ডিবাগিং ফাংশন কার্যকর করা বন্ধ করে।

ডিবাগার স্টেটমেন্ট কার্যকর করা স্থগিত করে, তবে এটি কোনও ফাইল বন্ধ করে না বা কোনও ভেরিয়েবল সাফ করে না।

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};


2

জাভাস্ক্রিপ্ট কোডটি ডিবাগ করার জন্য অনেকগুলি উপায় রয়েছে। কোডের মাধ্যমে জাভাস্ক্রিপ্ট ডিবাগ করতে নিম্নলিখিত দুটি পদ্ধতির ব্যাপকভাবে ব্যবহৃত হয়

  1. console.log()ব্রাউজার কনসোলে মানগুলি মুদ্রণ করতে ব্যবহার করে। (এটি আপনাকে আপনার কোডের নির্দিষ্ট পয়েন্টগুলিতে মানগুলি বুঝতে সহায়তা করবে)

  2. ডিবাগার কীওয়ার্ড। debugger;আপনি ডিবাগ করতে চান এমন অবস্থানগুলিতে যুক্ত করুন এবং ব্রাউজারের বিকাশকারী কনসোলটি খুলুন এবং উত্স ট্যাবে নেভিগেট করুন।

আপনি জাভাস্ক্রিপ্ট কোডটি ডিবাগ করুন এমন আরও সরঞ্জাম এবং উপায়গুলির জন্য ডাব্লু 3 স্কুল দ্বারা এই লিঙ্কটিতে দেওয়া হয়েছে ।


1
+1 এবং কনসোল.লগ ব্যবহার করা আপনার কোডটি সনাক্ত করতেও সহায়ক, কারণ সাধারণত ফাইল / লাইন # বার্তাটির পাশে দেখানো হয় এবং আপনি নিজের কোডটি ডিবাগার, সেট ব্রেক ব্রেকপয়েন্ট ইত্যাদি খোলার জন্য ক্লিক করতে পারেন
জন হেন্কেল

0

আমি আপনাকে debugger;জাভাস্ক্রিপ্ট কোডটি হত্যা এবং বন্ধ করতে চাইলে আমি সুপারিশ করব না , যেহেতু debugger;সাময়িকভাবে আপনার জাভাস্ক্রিপ্ট কোডটি স্থায়ীভাবে স্থির করে দেবে এবং স্থায়ীভাবে বন্ধ করবে না।

আপনি যদি আপনার কমান্ডে জাভাস্ক্রিপ্ট কোডটি সঠিকভাবে হত্যা এবং বন্ধ করতে চান তবে নিম্নলিখিতগুলি ব্যবহার করুন:

throw new Error("This error message appears because I placed it");

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.