ক্রোম বিকাশকারী সরঞ্জামগুলি: কনসোল এবং উত্সের পৃথক দর্শন / উল্লম্বভাবে টাইলস দেখুন?

128

ক্রোম বিকাশকারী সরঞ্জামগুলি: Consoleট্যাব এবং Sourcesট্যাব পৃথক দর্শনগুলিতে দেখার কোনও উপায় আছে কি ? আমি প্রায়শই এই দুটোকে একই সাথে দেখতে চাই।

ট্যাবে Escথাকা অবস্থায় টিপলে নীচের অংশে Sourcesএকটি ছোট ভিউ দেখতে পাবে Console। তবে আমি একই সাথে উভয়ের আরও বৃহত্তর দৃশ্য চাই। এটা কি সম্ভব?

যদি তা না হয় তবে এটি কি ক্রোম এক্সটেনশানটি করতে সক্ষম হতে পারে?

সম্পাদনা:

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

google-chrome google-chrome-extension google-chrome-devtools

— হিমাংশু পি
সূত্র

176

উল্লম্ব বিভাজন

আপনি বিকাশকারী সরঞ্জামগুলি (নীচে-বাম কোণে আইকনে ক্লিক করে) আনডক করতে পারেন, এটি এটিকে একটি নতুন উইন্ডোতে নিয়ে যায়। তারপরে Escকনসোলটি খুলতে টিপুন ।

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

অনুভূমিক বিভাজন

আপনি যদি নীচের পরিবর্তে ডানদিকে কনসোল পেতে পছন্দ করেন তবে ~~সম্পাদনা করে বিকাশকারী সরঞ্জামগুলি কাস্টমাইজpath/to/profile/Default/User StyleSheets/Custom.css~~ করুন এবং নিম্নলিখিত বিধিগুলি যুক্ত করুন:

সম্পাদনা: এর জন্য সমর্থন Custom.cssসরিয়ে দেওয়া হয়েছে, তবে এখনও একটি নতুন এপিআই, chrome.devtools.panels.applyStyleSheetপদ্ধতি ( নমুনা কোড ) ব্যবহার করে বিকাশকারী সরঞ্জামগুলির শৈলীগুলি পরিবর্তন করা সম্ভব ।

/* If drawer has been expanded at least once AND it's still expanded */
#-webkit-web-inspector #main[style*="bottom"]:not([style*="bottom: 0"]) {
    width: 50%;
    bottom: 0 !important;
}

#-webkit-web-inspector #drawer[style*="height"]:not([style*="height: 0"]) {
    /* The position of the drawer */
    left: 50% !important;
    /* styles to position the #drawer correctly */
    top: 26px !important;
    height: auto !important;
    z-index: 1;
    border-left: 1px solid rgb(64%, 64%, 64%);
}
#-webkit-web-inspector.show-toolbar-icons #drawer[style*="height"]:not([style*="height: 0"]) {
    top: 56px !important;
}

ফলাফলটি এরকম দেখাচ্ছে:

— রব ডাব্লু
সূত্র

1

দুঃখিত, আমার স্পষ্ট করা উচিত ছিল (মূল পোস্টেও এটি করব): আমি ইতিমধ্যে একটি আনডকড বিকাশকারী সরঞ্জাম উইন্ডো ধরে নিচ্ছি (এটি আমার পক্ষে এটি ডিফল্টরূপে)। তবে সেই উইন্ডোটি থেকে আমি এখনও "টেনে আনা" করতে Consoleবা Sourcesআলাদা উইন্ডোটির মতো করতে সক্ষম হব যেমন আপনি ক্রোমের নিয়মিত ট্যাবগুলি সহ করতে পারেন

— হিমাংশু পি

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

— রব ডব্লিউ

প্রতিশ্রুতিবদ্ধ (যদিও জটিল)। এটি চেষ্টা করে দেখুন এবং এটি কীভাবে কার্যকর হয় তা পোস্ট করবে

— হিমাংশু পি

1

@ হিমাংশুপি রিমোট ডিবাগিং এখনও একাধিক উদাহরণ সমর্থন করে না। আমি আমার উত্তরটি একটি বিকল্প পদ্ধতি দিয়ে আপডেট করেছি, এটি পরীক্ষা করে দেখুন।

— রব ডব্লু

1

আমি সর্বদা দৃশ্যমান যে উল্লম্বভাবে বিভক্ত কনসোলটি বন্ধ করার একটি উপায় খুঁজছিলাম। Escএটা করেছে. ধন্যবাদ!

— duma

100

esc - শর্টকাট,

অথবা

এ menu(the three dots)ক্লিক করুনshow console drawer

— bhv
সূত্র

3

দশকে একবার আমি একটি বৈশিষ্ট্য অনুসন্ধান করি এবং এটি সক্রিয়ভাবে দেখা যায় এটির জন্য একটি বোতাম ছিল ঠিক আমার কীবোর্ডে। প্রকার, রকম.

— বব স্টেইন

10

ডানদিকে "থ্রি ডটস" টিপুন এবং "কনসোল ড্রয়ার দেখান" ক্লিক করুন

— সোহম মেহতা
সূত্র

7

ওপি সম্ভবত তিন বছর আগে এটি পোস্ট করার পরে থেকে এগিয়ে গেছে, তবে অন্য কারও জন্য:

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

দেব সরঞ্জাম উইন্ডোর উপরের ডানদিকে তিনটি ডট মেনু খুলুন।
সেটিংস নির্বাচন করুন'.
"সাধারণ" ট্যাব -> "উপস্থিতি" বিভাগ
"প্যানেল লেআউট"

— Pogginhopper
সূত্র

আমি দীর্ঘদিন এই উত্তরটি খুঁজছি। ধন্যবাদ! আমার ক্ষেত্রে, যখন আমার স্ক্রিনটি পুরো প্রস্থে নেই তখন প্যানেলগুলি নীচে উল্লম্বভাবে স্ট্যাক করবে। এটি আমার পক্ষে খুব প্রতিক্রিয়াশীল ছিল কারণ আমি চেয়েছিলাম যে প্যানেলগুলির গোষ্ঠীগুলি নীচে পাশে পাশাপাশি থাকুক, উল্লম্বভাবে স্ট্যাক করা না। লেআউট আইকনটি ক্লিক করা আমার যে লেআউটটি চেয়েছিল তা দেয়নি, তবে আপনার সমাধানটি আমি যেমন চেয়েছিলাম তেমন কাজ করেছে।

— ক্রিস 22

আমি যখনই একটি নতুন কম্পিউটারে স্যুইচ করি তখনই আমাকে এই সেটিংসটি কীভাবে খুঁজে পেতে হবে এবং আমার পছন্দসই লেআউটটি কীভাবে পাবেন তা অনুসন্ধান করতে হবে। ধন্যবাদ!

— স্ট্যাসিহোর্টন

5

একটি সহজ সমাধান হ'ল নীচে বাম আইকন টিপুন যা অন্য আইকনটি পপ করবে যা নির্বাচিত হলে, আপনাকে আপনার মূল ব্রাউজার উইন্ডোর ডানদিকে কনসোলটি দেখতে দেয়

— লয়েড মুর
সূত্র

এই সত্যিই গৃহীত উত্তর হওয়া উচিত, কারণ এটি উভয় সঠিক এবং "সুস্পষ্ট" হয়

— miraculixx

দ্রষ্টব্য: ক্রোমের সাম্প্রতিক সংস্করণগুলিতে (2015-03-18 হিসাবে) ডকড-ডাউন এবং ডকড-সাইড মোডগুলি এড়ানোর জন্য এটি বাধ্যতামূলক - অর্থাৎ আপনি একটি পৃথক উইন্ডো চান।

— ম্যাক্সফ্রেঞ্জ

1

@ মিরাকুলিক্সক্স না, এটি সঠিক নয়। ওপিতে ইতিমধ্যে একটি আনডকড ডিভলটুলস উইন্ডো রয়েছে।

— jpaugh

1

"নীচের বাম আইকন "টি অনুধাবন করতে পারছি না (এই মন্তব্যের তারিখ অনুসারে আমার জন্য কিছুই নেই)

— প্যাক ২

2

আপনি যদি টাইপ করতে পারেন তবে কনসোলটি না দেখে এবং এটির আকার পরিবর্তন করতে না পারেন:

তারপরে উপরের-ডানদিকে কোণে ডিভলটুলগুলি আনডক করুন । তারপরে আপনি এটির আকার পরিবর্তন করতে সক্ষম হবেন:

এর পরে আপনি এটিকে আবার ডক করতে পারেন।

— গেনাডি জি
সূত্র