ক্রোম ডিবাগারে সম্পাদনা


247

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


5
আপনি অপেরা ব্যবহার করতে পারেন। অপেরা জেএস ফাইলগুলির সম্পাদনার অনুমতি দেয়। আপনি পৃষ্ঠাটি নরম পুনরায় লোড করার পরে, আপনার পরিবর্তনগুলি প্রয়োগ করা হবে। ডান ক্লিক করুন> উত্স> পরিবর্তন করুন> পরিবর্তনগুলি প্রয়োগ করুন।
এক্সপি 1

এটি ক্রোম ডিবাগারটির জন্য দুর্দান্ত একটি টিউটোরিয়াল। এটি আপনার স্ক্রিপ্টগুলিতে ইন-ডিবাগার পরিবর্তন করার জন্য খুব সহজ পদক্ষেপ দেখায়।
সাগানরাইটুয়াল

1
আপনি শর্তাধীন ব্রেকপয়েন্টের মাধ্যমে কোড "ইনজেকশন" করতে পারেন । প্রদত্ত উদাহরণে ফাংশনের num = 5, console.log(arguments[0], num), falseঅভ্যন্তরের মান আপডেট এবং লগ করতে ব্যবহার করুন foo
mems

দয়া করে এই এটি stackoverflow.com/questions/66420/...
stackinfostack

উত্তর:


80

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

গুগল আই / ও ২০১০ ইভেন্টের ক্রোম বিকাশকারী সরঞ্জামগুলির অন্যান্য দক্ষতার পরিচয় করিয়ে দেওয়ার একটি ভিডিও রয়েছে


26
ক্রোমের পরবর্তী সংস্করণগুলিতে ট্যাব আইকনগুলি চলে গেছে এবং 'স্ক্রিপ্টস' ট্যাবটির নাম পরিবর্তন করে 'উত্স' করা হয়েছে - সুতরাং জাভাস্ক্রিপ্ট ডিবাগারটি খুঁজে পাওয়া সুস্পষ্ট নাও হতে পারে। আরো কিছু তথ্য এখানে stackoverflow.com/questions/12113769/...
chrisjleu

9
এরকম কোনও পদ্ধতি নেই। আমি সোর্স ট্যাবের অধীনে কোড পরিবর্তন করতেও অক্ষম unable
মেলাব

17
ক্রোম ডিবাগার জাভাস্ক্রিপ্টের স্থানীয় পরিবর্তনের অনুমতি দেয় না। মিথ্যা।
omikes

1
@oMiKeY মিথ্যা কি? ক্রোম অবশ্যই স্ক্রিপ্টটি ডিবাগারে পরিবর্তন করার অনুমতি দেয়।
জেএলরিশ

6
@ ও মাইকি আপনি স্ক্রিপ্টটি পূর্বনির্ধারিত না হলে সংশোধন করতে পারবেন
পেটারচাউলা

284

আমি আজ এটিকে পেরিয়ে এসেছি, যখন আমি অন্য কারও ওয়েবসাইটের সাথে ঘুরছিলাম।

আমি বুঝতে পেরেছিলাম যে আমি গতিশীলরূপে সম্পাদনা করতে চাই তার আগে আমি ডিবাগারের কোনও কোডের লাইনে একটি ব্রেক-পয়েন্ট সংযুক্ত করতে পারি। এবং যেহেতু ব্রেক-পয়েন্টগুলি পৃষ্ঠাটির পুনরায় লোডের পরেও থাকে লোডের পরেও থেকে যায়, তাই ব্রেক-পয়েন্টে বিরতি দেওয়ার সময় আমি যে পরিবর্তনগুলি চেয়েছিলাম তা সম্পাদনা করতে সক্ষম হয়েছি এবং তারপরে পৃষ্ঠাটি লোড হতে দেওয়া চালিয়ে যাচ্ছি।

তাই চারদিকে দ্রুত কাজ হিসাবে এবং যদি এটি আপনার পরিস্থিতির সাথে কাজ করে:

  1. স্ক্রিপ্টের আগের পয়েন্টে একটি ব্রেক-পয়েন্ট যুক্ত করুন
  2. রিলোড পাতা
  3. কোডে আপনার পরিবর্তনগুলি সম্পাদনা করুন
  4. CTRL+ s(পরিবর্তনগুলি সংরক্ষণ করুন)
  5. ডিবাগারটি বন্ধ করুন

1
ধন্যবাদ! আমি নিজেকে স্ব-সম্পাদনকারী বেনামি ফাংশনটিতে পরিবর্তন করার দরকার পড়লে একে ঠিক পৃষ্ঠার লোডের কাছাকাছি বলা হয়েছিল worked
পিটার

1
আরগ, কারণ আমি এটি আগে চেষ্টা করেছি এবং এটি কার্যকর হয়নি এবং যদিও ওহ মানুষ, আমি কীভাবে এটি মিস করেছি। তবে হ্যাঁ, আমার পক্ষে কাজ করে না।
জেমি হুটার

8
আমার জন্য গুরুতর বিষয়টি ছিল তা জানা ছিল যে পরিবর্তনগুলি সংরক্ষণ করা উচিত (4 ধাপ)। ধন্যবাদ!
সের্গেই গলিনে

3
আমার জন্য এইচটিএমএল ফাইলের ভিতরে জাভাস্ক্রিপ্টে কাজ করে না। এছাড়াও, আপনি যদি ওয়ার্কস্পেসে কোনও ফোল্ডার যুক্ত করেছেন, স্থানীয় জেএস ফাইলটি নির্বাচন করুন, ডান-ক্লিক করুন এবং সেই ফাইলটি নেটওয়ার্ক ডিটোতে মানচিত্র করুন।
oo

1
সুতরাং এইচটিএমএল ফাইলগুলিতে স্ক্রিপ্টগুলি সংশোধন করার কোনও উপায় নেই?
যোদ্ধা 15

13

এটি আপনি যা খুঁজছেন:

1.- উত্স ট্যাবে নেভিগেট করুন এবং জাভাস্ক্রিপ্ট ফাইল খুলুন

২- ফাইলটি সম্পাদনা করুন, ডান ক্লিক করুন এবং একটি মেনু উপস্থিত হবে: ক্লিক করুন সংরক্ষণ করুন এবং স্থানীয়ভাবে এটি সংরক্ষণ করুন

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

এখানে আরও বিশদ তথ্য: http://www.sitepPoint.com/edit-source-files-in-chrome/


5

খুব সহজ, 'স্ক্রিপ্টস' ট্যাবে যান। আপনি যে উত্স ফাইলটি চান তা নির্বাচন করুন এবং এটি সম্পাদনা করতে যে কোনও লাইনকে ডাবল ক্লিক করুন।


4
ফাইলটির ক্ষেত্রে আপনি যদি ডিস্কে পরিবর্তনগুলি সংরক্ষণ করতে পারেন তবে দুর্দান্ত লাগবে: // ইউআরএল
জিম ব্ল্যাকার

3
আমি হুবহু এটিই করেছি, তবে পরিবর্তনগুলি পৃষ্ঠায় প্রতিফলিত হয়নি, যেমনটি প্রত্যাশা করবে। আমাকে $ (নির্বাচক) পরিবর্তন করতে হবে .ফ্যাডইন () ... থেকে $ (নির্বাচক)। স্টপ (সত্য, সত্য) .ফ্যাডইন () ... ইয়াক? এবং আমি পৃষ্ঠাতে ঘটতে দেখতে সক্ষম হতে চাই।
টম

1
ওহ জঘন্য, আপনি ঠিক বলেছেন। এখন আমি ভাবছি কেন ক্রোম আমাদের কোনও কিছু সম্পাদনা করার অনুমতি দেয় যদি এর কোনও প্রভাব না থাকে ..
gnur

"হিসাবে সংরক্ষণ করুন ..." ফাইলটি কেবল আপনার কম্পিউটারে সংরক্ষণ করে। পৃষ্ঠাটি পুনরায় লোড হওয়ার পরে এটি পরিবর্তনগুলি প্রয়োগ করে না। আপনি যদি ডিবাগিংয়ের জন্য জেএস ফাইলগুলিতে পরিবর্তনগুলি প্রয়োগ করতে চান তবে আপনি অপেরা ব্যবহার করতে পারেন।
এক্সপি 1

1
এবং এটি যাকে বলে tincr: chrome.google.com/webstore/detail/…
JustGoscha

3

যেহেতু এটি বেশ জনপ্রিয় একটি প্রশ্ন যা জেএসের সরাসরি সম্পাদনা নিয়ে কাজ করে, আমি অন্য একটি দরকারী বিকল্পটি নির্দেশ করতে চাই। যেমনটি তার উত্তরে এসভিজাকব বর্ণনা করেছেন:

আমি বুঝতে পেরেছিলাম যে আমি গতিশীলরূপে সম্পাদনা করতে চাই তার আগে আমি ডিবাগারের কোনও কোডের লাইনে একটি ব্রেক-পয়েন্ট সংযুক্ত করতে পারি। এবং যেহেতু ব্রেক-পয়েন্টগুলি পৃষ্ঠাটির পুনরায় লোডের পরেও থেকে যায়, তাই ব্রেক-পয়েন্টে বিরতি দেওয়ার সময় আমি যে পরিবর্তনগুলি চেয়েছিলাম তা সম্পাদনা করতে সক্ষম হয়েছি এবং তারপরে পৃষ্ঠাটি লোড হতে দেওয়া চালিয়ে যাচ্ছি।

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

আমার ক্ষেত্রে সাফল্যের সাথে সাড়া জাগাতে আমাকে ফিডলারের সাথে সিওআরএস শিরোনামও যুক্ত করতে হয়েছিল।


2

যদি এর জাভাস্ক্রিপ্ট যা একটি বোতাম ক্লিক করে চলতে থাকে তবে সোর্স> সোর্স (ক্রোমের বিকাশকারী সরঞ্জামগুলিতে) এর অধীনে পরিবর্তন করা এবং সংরক্ষণের জন্য Ctrl + S টিপানো যথেষ্ট is । আমি সব সময় এটা করি।

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


2

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

তার জন্য F12 -> উত্স ট্যাব - (ডান দিকের) -> ফাইল সিস্টেম টিপুন - এতে আপনার কোডের অবস্থানটি নির্বাচন করুন। এবং তারপরে ক্রোম ব্রাউজার আপনাকে অনুমতি চাইবে এবং তার পরে কোডটি সবুজ বর্ণের সাথে ডুবে যাবে। এবং আপনি আপনার কোডটি সংশোধন করতে পারেন এবং এটি আপনার কোড অবস্থানের উপরও প্রতিফলিত হবে (এর অর্থ এটি স্থায়ী পরিবর্তন হবে)

ধন্যবাদ


2

@ মার্কের উত্তরের মতো, আমরা ক্রোম ডেভটুলগুলিতে একটি স্নিপেট তৈরি করতে পারি, overrideডিফল্ট জাভাস্ক্রিপ্টে। পরিশেষে, পৃষ্ঠায় তাদের কী প্রভাব রয়েছে তা আমরা দেখতে পাচ্ছি।

ভাবমূর্তি


1

আমি লিখেছিলাম ক্রোমে জেএস ডিবাগারের একটি মৃদু পরিচয়। হতে পারে এটি অন্যকে এই বিষয়ে অনুসন্ধান করতে সহায়তা করবে: http://meeech.amihod.com/getting-st সূত্র- জাভাস্ক্রিপ্ট-debugging-in-chrome/


1
এটি একটি ভাল লেখার ব্যবস্থা। দুর্ভাগ্যক্রমে, এটি ডিবাগারে জেএস সম্পাদনা করার কিছুই বলেছে না যা প্রশ্নে কাজ।
ব্রুনো ব্রোনোস্কি

একমত নন। আপনি শেষে দেখুন আমি বিশেষত উদাহরণস্বরূপ উদাহরণ দিচ্ছি যে কীভাবে "" গতিশীলভাবে "ক্রোম ডিবাগারটিতে জাভাস্ক্রিপ্ট কোড সম্পাদনা করা যায়" যা প্রশ্নের অংশ।
meeech

1
আমি আপনাকে পোস্টটি ভুল বোঝাবুঝি না করে আপনি কনসোলে জেএসকে কীভাবে মূল্যায়ন করবেন তা আপনি প্রদর্শিত করেন। এটি কোনও ফাংশন সম্পাদনা করা থেকে পৃথক যাতে ভবিষ্যতে যখন ফাংশনটি ডাকা হয় তখন এটি অন্যরকম আচরণ করে।
ব্রুনো ব্রোনোস্কি 14'14

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

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

1

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


আপনাকে কনসোলটি উন্মুক্ত রাখতে হবে যাতে ক্রোম ব্রেকপয়েন্টগুলিতে থামবে, অন্যথায় ক্রোম ব্রেকপয়েন্টগুলিকে উপেক্ষা করবে
Seif Tamallah

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

1

আমি স্ক্রিপ্ট পরিবর্তন করতে এবং সেই নতুন স্ক্রিপ্টটি ডিবাগ করার জন্য একটি উপায় খুঁজছিলাম। আমি যেভাবে পরিচালনা করেছি তা হ'ল:

  1. আপনি যে স্ক্রিপ্টটি পরিবর্তন করতে এবং ডিবাগ করতে চান তার প্রথম লাইনে ব্রেকপয়েন্টটি সেট করুন।

  2. পৃষ্ঠাটি পুনরায় লোড করুন যাতে ব্রেকপয়েন্টটি হিট হচ্ছে

  3. আপনার নতুন স্ক্রিপ্ট আটকান এবং এতে কাঙ্ক্ষিত ব্রেকপয়েন্ট সেট করুন

  4. Ctrl + s, এবং পৃষ্ঠাটি রিফ্রেশ করবে যার ফলে প্রথম লাইনে সেই ব্রেকপয়েন্টটি হিট হবে।

  5. অবিরত রাখতে F8, এবং এখনই আপনার নতুন আটকানো স্ক্রিপ্টটি ততক্ষণ মুখ্যটিকে প্রতিস্থাপন করবে যতক্ষণ কোনও পুনঃনির্দেশ এবং পুনরায় লোড না করা হয়।


0

ক্রোম ডেভটুলসের একটি স্নিপেটস প্যানেল রয়েছে যেখানে আপনি জাভাস্ক্রিপ্ট কোডটি তৈরি করতে এবং সম্পাদকের মতো সম্পাদনা করতে এবং এটি সম্পাদন করতে পারবেন। দেবটুলগুলি খুলুন, তারপরে উত্স প্যানেলটি নির্বাচন করুন, তারপরে স্নিপেটস ট্যাবটি নির্বাচন করুন।

https://developers.google.com/web/tools/chrome-devtools/snippets

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


0

আপনি যেখানে আসল উত্সটি হোস্ট করছেন না সেখানে পৃষ্ঠা লোডগুলির মধ্যে জাভাস্ক্রিপ্ট পরিবর্তনগুলি অব্যাহত রাখতে আপনি Chrome এ "ওভাররাইডস" ব্যবহার করতে পারেন।

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

Chrome বিকাশকারী সরঞ্জামগুলিতে ওভাররাইড সাব ট্যাব

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