গুগল ক্রোমে ইনলাইন জাভাস্ক্রিপ্টে ব্রেকপয়েন্টগুলি কীভাবে সেট করবেন?

Question

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

Comments

আমি ক্রোম ছেড়ে দিয়েছি। ফায়ারফক্সের সাথে চেষ্টা করেছিলাম এবং কয়েক সেকেন্ডের মধ্যেই আমার ব্রেকপয়েন্টটি হিট হয়েছিল। এটি ক্রোমের মাধ্যমেই সম্ভব হতে পারে তবে কীভাবে তা স্পষ্টভাবে স্পষ্ট নয়!

— অলিভার পি

Answer 1

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

Comments

কিছু কারণে আমি অন্তর্ভুক্ত জেএস ফাইলগুলির তালিকা দেখি, তবে আমি নিজেই নির্বাহক পৃষ্ঠাটি চয়ন করতে পারি না, এটি তালিকায় প্রদর্শিত হয় না। কোন ধারনা?

— ulu

@ জুলু, আমারও একই সমস্যা ছিল। আপনার <script> উপাদানটিতে আপনার টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" বৈশিষ্ট্য সেট করা আছে তা নিশ্চিত করুন।

— পরিচিতিমেট

এইচটিএমএল 5 ব্যতীত এই বৈশিষ্ট্যটি আর বাধ্যতামূলক নয়। আমি সোর্স কোডটি পরিবর্তন করছি না কেবল ডিবাগ!

— sashok_bg

টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" যুক্ত করার পরেও আমি দেখতে পাচ্ছি না

— নীতিন কুমার মিশ্র

যদি এটি কাজ করে না, এবং আপনার মতো ইনলাইন জাভাস্ক্রিপ্ট কোড রয়েছে: <script> your code </script>যেমন একটি নাম যুক্ত করুন: <script> your code //# sourceURL=somename.js </script> নীচের উত্তরে এটি আরও ভালভাবে ব্যাখ্যা করা হয়েছে

— কেএম।

Answer 2

আপনি কি <script>ট্যাগের মধ্যে কোড , বা এইচটিএমএল ট্যাগ বৈশিষ্ট্যগুলিতে এই জাতীয় কথা বলছেন ?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

যে কোনও উপায়ে, এরdebugger মতো কীওয়ার্ডটি কাজ করবে:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

debuggerযদি ডিভাইসগুলি না খোলা থাকে তবে এনবি ক্রোম এগুলি থামবে না।

---

আপনি জেএস ফাইল এবং <script>ট্যাগগুলিতে সম্পত্তি ব্রেকপয়েন্টগুলিও সেট করতে পারেন :

1. উত্স ট্যাবে ক্লিক করুন
2. নেভিগেটর দেখান আইকনটি ক্লিক করুন এবং একটি ফাইল নির্বাচন করুন
3. বাম-হাতের মার্জিনে একটি লাইন নম্বরটিতে ডাবল ক্লিক করুন। ব্রেকপয়েন্টস প্যানেলে একটি অনুরূপ সারি যুক্ত করা হয় (4)

Comments

কোনও স্ক্রিপ্ট ট্যাব নেই। আমি এই ছবিতে থাকা অন্য সমস্ত ট্যাব দেখতে পাচ্ছি তবে কোনও স্ক্রিপ্ট ট্যাব নেই!

— এসেস

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

— এসেস

স্ক্রিপ্টস ট্যাবটির নীচে ড্রপ-ডাউনে আমি কেবল জেএস ফাইলগুলি তালিকাভুক্ত দেখতে পাচ্ছি, তবে এইচটিএমএল ফাইলগুলিতে নয় যেটিতে আমি সন্ধান করতে চাইছি এমন <script> ট্যাগ রয়েছে। এফএফ-তে ফায়ারব্যাগের অনুরূপ ড্রপ-ডাউন রয়েছে, তবে এইচটিএমএল ফাইলগুলিও তালিকাবদ্ধ করে যাতে <script> ট্যাগ রয়েছে। এটি কি কোনও বাগ বা ইনিল্যান্ডেড জেএস কোডে ব্রেকপয়েন্ট স্থাপন করার অন্য কোনও উপায় আছে?

— ওল্ফরাম আর্নল্ড

ট্যাবটির Sourcesপরিবর্তে Scriptsএখনই বলা হয় ।

— কোডারডেনিস

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

— শুভকোডার 86

Answer 3

আপনি আপনার স্ক্রিপ্টে একটি নামও দিতে পারেন:

<script> ... (your code here) //# sourceURL=somename.js </script>

অফকোর্স "কিছু নাম" কে কিছু নাম দিয়ে প্রতিস্থাপন করুন;) এবং তারপরে আপনি এটিকে ক্রোম ডিবাগারে একটি সাধারণ স্ক্রিপ্ট হিসাবে "উত্স> শীর্ষ> (কোনও ডোমেন নয়)> somename.js" এ দেখতে পাবেন এবং আপনি অন্যান্য স্ক্রিপ্টগুলির মতো এটি ডিবাগ করতে সক্ষম হবেন

Comments

যেতে সহজ এবং নিখুঁত উপায়। তবে অন্যদের জন্য নোট করুন, উত্পাদন এ ধাক্কা দেওয়ার আগে এটি মুছে ফেলার মনে রাখবেন।

— জমির ফুজান

ওহ godশ্বর, আপনি জানেন না যে এটি আমাকে কতটা সাহায্য করেছিল। হায় খোদা এই উজ্জ্বল। আমি যুগ যুগ ধরে এই জাতীয় কিছু সন্ধান করছি।

— গ্রেগরোস

আমি এটি (সূক্ষ্ম) ধারণাটি ব্যবহার করেছি, তবে উত্স ট্যাবে নতুন ফাইলটি দেখতে পাচ্ছি না, কেবলমাত্র এইচটিএমএল ফাইল। তারপরে আমি কোডটি কার্যকর করেছিলাম এবং শেষে, কনসোলে, স্ক্রিপ্ট থেকে যা কিছু বার্তা লেখা আছে তার ডানদিকে আপনি কোডের একটি লিঙ্ক দেখতে পাচ্ছেন। সর্বোত্তম অংশটি হ'ল লিঙ্কটি স্ক্রিপ্টটিতে আপনার দেওয়া ফাইলের নামটি দেখায় (যেমন, // # উত্স URL = কিছু নাম.js)।

— ম্যানুয়েল রিভেরা

আমি পারলে আপনাকে 1000 টি উচ্চতর মূল্যায়ন করবো;) খুব দরকারী কৌশল

— গিয়ুলিও কোয়ারেসিমা

Answer 4

স্ক্রিপ্ট ট্যাবটিতে বিকাশকারী সরঞ্জামগুলি খুললে স্ক্রিপ্টযুক্ত পৃষ্ঠাটি রিফ্রেশ করুন। এটি ফাইল তালিকায় একটি (প্রোগ্রাম) এন্ট্রি যুক্ত করবে যা স্ক্রিপ্ট সহ পৃষ্ঠার এইচটিএমএল দেখায়। এখান থেকে আপনি ব্রেকপয়েন্টগুলি যোগ করতে পারেন।

Comments

এটি আমার পক্ষে কাজ করে না। পরিবর্তে, স্ক্রিপ্ট ট্যাবে প্রোগ্রাম ফাইলটি খুলতে আমি নীচে ডানদিকে একটি স্ক্রিপ্ট ত্রুটি আইকনে ক্লিক করেছি।

— sanbikinoraion

ধন্যবাদ! Chrome 69 ব্যবহার করে, আমি উত্স ট্যাবে না থাকলেও এটি কাজ করেছিল worked পৃষ্ঠাটি লোড হওয়ার সময় বিকাশকারী সরঞ্জামগুলি উন্মুক্ত করা মনে হচ্ছে এটি চাবি।

— স্যাম

এটি যদি আমার প্রশ্ন হত তবে এটি গ্রহণযোগ্য উত্তর হত। ধন্যবাদ.

— plumpNation

ক্রোম 83 এ কাজ করেছেন my আমার এনভিতে ফাইলের নামটি আপনার অ্যাপ্লিকেশনটির URL এর ভিত্তিতে তৈরি on উদাহরণস্বরূপ, URL টি যদি URL.com/xxx/yyy হয় তবে ফাইলের নামটি "yyy" হবে।

— হেলিক্স কোয়ার

Answer 5

এজাক্স দ্বারা ফিরে আসা HTML এর ভিতরে বিশেষত স্ক্রিপ্টটি ডিবাগ করার জন্য একটি স্বজ্ঞাত সহজ কৌশল, স্ক্রিপ্টের মধ্যে অস্থায়ীভাবে কনসোল.লগ ("পরীক্ষা") করা।

আপনি ইভেন্টটি সরিয়ে দেওয়ার পরে, বিকাশকারী সরঞ্জামগুলির মধ্যে কনসোল ট্যাবটি খুলুন। আপনি "টেস্ট" ডিবাগ প্রিন্ট স্টেটমেন্টের ডানদিকে প্রদর্শিত উত্স ফাইলের লিঙ্কটি দেখতে পাবেন। কেবল উত্সটিতে ক্লিক করুন (ভিএম 4 এক্সএক্সএক্স এর মতো কিছু) এবং আপনি এখন ব্রেক পয়েন্ট নির্ধারণ করতে পারেন।

পিএস: এছাড়াও, আপনি যদি ক্রোম ব্যবহার করছেন তবে আপনি "ডিবাগার" স্টেটমেন্টটি বিবেচনা করতে পারেন, যেমন @ ম্যাট বলের পরামর্শ দেওয়া হচ্ছে

Answer 6

আমার পরিস্থিতি এবং আমি এটি ঠিক করার জন্য কী করেছি:
আমার একটি জাভাস্ক্রিপ্ট ফাইল এইচটিএমএল পৃষ্ঠায় অন্তর্ভুক্ত রয়েছে:
পৃষ্ঠার নাম: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

এখন ক্রোমে জাভাস্ক্রিপ্ট ডিবাগারটি প্রবেশ করিয়ে আমি স্ক্রিপ্টস ট্যাবটি ক্লিক করি এবং উপরে দেখানো অনুসারে তালিকাটি নামিয়ে দিই। আমি স্ক্রিপ্টগুলি / সাধারণ.জেএস স্পষ্ট দেখতে পাচ্ছি তবে আমি ড্রপ ডাউনটিতে বর্তমান এইচটিএমএল পৃষ্ঠা টেস্ট.ইচটিএমএল দেখতে পেলাম না , তাই এম্বেড থাকা জাভাস্ক্রিপ্টটি আমি ডিবাগ করতে পারিনি:

<script type="text/javascript">
  document.write("something");
</script>

সে হতবাক হয়েছিল। যাইহোক, যখন আমি এমবেড করা স্ক্রিপ্ট থেকে অপ্রচলিত টাইপ = "পাঠ / জাভাস্ক্রিপ্ট" মুছে ফেলি :

<script>
  document.write("something");
</script>

.. এবং পৃষ্ঠাটি রিফ্রেশ / পুনরায় লোড করে, ভয়েলা, এটি ড্রপ ডাউন তালিকায় উপস্থিত হয়েছিল এবং সমস্ত কিছু আবার ভাল হয়েছে।
আমি আশা করি যে এইচটিএমএল পৃষ্ঠায় এম্বেড করা জাভাস্ক্রিপ্টের ডিবাগিংয়ের সমস্যা রয়েছে তার জন্য এটি সহায়ক।

Comments

ভাল করেছ! ক্রোম 20.0.1132.57 এ ম্যাক 10.7.4 তে পরীক্ষিত হয়েছে ক্রোমিয়াম প্রকল্পে বাগ জমা দিয়েছে।

— মঙ্গলবার রবার্টসন

এইচটিএমএল 4 এবং এক্সএইচটিএমএল এ typeপ্রয়োজনীয় বৈশিষ্ট্য হ'ল সচেতন হন । এইচটিএমএল 5 এ এটি alচ্ছিক।

— হটশট 309

টাইপের সাথে এর কিছু করার নেই। স্ক্রিপ্টটি মৃত্যুর পরে ভিএম দ্বারা সংগ্রহ করা হয় যদি না এই সময়ে ইন্সপেক্টরটি ইতিমধ্যে খোলা না থাকে। আপনি পৃষ্ঠাটি পুনরায় লোড করার সময় এটি স্ক্রিপ্ট সংগ্রহ করেনি।

— vsevik

আমি আমার মামলা, অনুপস্থিতি <div>আমাকে ডিবাগারে কোডটি দেখতে বাধা দিয়েছে

— ceztko

Answer 7

debugger;আমার স্ক্রিপ্টে শীর্ষে যোগ করা আমার পক্ষে কাজ করেছিল।

Answer 8

আমারও একই সমস্যা ছিল, কীভাবে জাভাস্ক্রিপ্ট ডিবাগ করা যায় যা <script>ট্যাগগুলির অভ্যন্তরে থাকে। তবে তারপরে আমি এটি প্রথম ("সূচক)" নামে উত্স ট্যাবের অধীনে প্রথম বন্ধনী সহ পেয়েছি। ব্রেকপয়েন্টগুলি সেট করতে লাইন নম্বরটিতে ক্লিক করুন।

এটি ক্রোম 71।

Answer 9

আপনি যদি "স্ক্রিপ্টস" ট্যাবটি দেখতে না পান তবে নিশ্চিত করুন যে আপনি সঠিক যুক্তি দিয়ে Chrome চালু করছেন। যুক্তি দিয়ে সার্ভার-সাইড জাভাস্ক্রিপ্ট ডিবাগ করার জন্য ক্রোম চালু করার সময় আমার এই সমস্যা হয়েছিল --remote-shell-port=9222। আমি যদি কোনও যুক্তি ছাড়াই Chrome চালু করি তবে আমার কোনও সমস্যা নেই।

Comments

আপনি দয়া করে বিস্তারিত বলতে পারেন? আমার এই সঠিক সমস্যাটি হচ্ছে - স্ক্রিপ্টস ট্যাবটি মোটেই দেখতে পাচ্ছেন না। আমি ক্রমের সর্বশেষতম বিকাশকারী বিল্ড ডাউনলোড করেছি।

— টম রেডফার্ন

Answer 10

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

এর অর্থ হ'ল আমি যখন আমার ইনলাইন দিয়ে নির্দিষ্ট ভিউটি খুলছিলাম (এটির কোনও বিকল্প ছিল না) তখন এটি অ্যাক্সেসযোগ্য ছিল না।

আমি যেভাবে হিট করতে পেরেছি তা হ'ল ইনলাইন জেএস ফাংশনের ভিতরে একটি ভুল ফাংশন বা কল করা।

আমার সমাধান অন্তর্ভুক্ত:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

এর অর্থ যখন আমি আমার বোতামে ক্লিক করি তখন ক্রোম কনসোলেসে আমাকে অনুরোধ করা হয়েছিল।

Uncaught TypeError: undefined is not a function 

এখানে গুরুত্বপূর্ণ বিষয়টির উত্স ছিল: VM5658:6এটিতে ক্লিক করা আমাকে ইনলাইনটির মধ্য দিয়ে পা রাখতে এবং সেখানে বিরতির পয়েন্টটি পরে রাখার অনুমতি দেয় ..

এটি পৌঁছানোর চূড়ান্তভাবে সংশ্লেষিত উপায় .. তবে এটি কার্যকর হয়েছে এবং একক পৃষ্ঠার অ্যাপ্লিকেশনগুলির সাথে ডিল করার সময় কার্যকর হতে পারে যা আপনার মতামতকে গতিশীলভাবে লোড করে।

VM[n]কোন উল্লেখযোগ্য মান আছে, এবং nস্ক্রিপ্ট আইডি সমান হয়। এই তথ্যটি এখানে পাওয়া যাবে: ক্রোম "[ভিএম]"

Answer 11

ভিজ্যুয়াল স্টুডিও (2012) ব্যবহার করে আমারও একই সমস্যা ছিল এবং আইআইএস এক্সপ্রেসে স্যুইচ করা সমস্যার সমাধান করেছে!

scriptট্যাগ এর typeঅ্যাট্রিবিউট তা ফ্যাক্টর না।

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

Answer 12

আমি জানি যে প্রশ্নটি প্রায় নয় Firefoxতবে আমি নিজের প্রশ্নের উত্তর দেওয়ার জন্য এই প্রশ্নের একটি অনুলিপি যুক্ত করতে চাইনি।

ফায়ারফক্সের জন্য আপনাকে ট্যাগের জন্য @ ম্যাট-বল প্রস্তাবিত debugger;কাজটি করতে সক্ষম হতে হবে ।script

সুতরাং আপনার কোডে, আপনি debuggerযে লাইনটি ডিবাগ করতে চান তার উপরে যোগ করুন এবং তারপরে আপনি ব্রেকপয়েন্টগুলি যুক্ত করতে পারেন। আপনি কেবল ব্রাউজারে ব্রেকপয়েন্টগুলি সেট করলে এটি থামবে না।

এটি যদি ফায়ারফক্সের উত্তর যুক্ত করার জায়গা না হয় তবে প্রদত্ত প্রশ্নটি ক্রোম সম্পর্কে। করবেন না :( বিয়োগ বিয়োগটি কেবল আমাকে কোথায় পোস্ট করা উচিত তা জানতে দিন এবং আমি খুশিতে পোস্টটি সরিয়ে দেব।

Answer 13

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