Chrome डेवलपर टूल: अलग-अलग दृश्य में कंसोल और स्रोत दृश्य देखें / लंबवत रूप से टाइल किए गए?

128

Chrome डेवलपर टूल: क्या Consoleटैब और Sourcesटैब को अलग-अलग विचारों में देखने का कोई तरीका है ? मैं अक्सर इन दोनों को एक साथ देखना चाहता हूं।

टैब Escपर दबाने पर Sourcesमुझे नीचे का एक छोटा दृश्य दिखाई देगा Console। लेकिन मुझे एक ही समय में दोनों का एक बड़ा दृश्य पसंद आएगा। क्या यह संभव है?

यदि नहीं, तो क्या यह कुछ ऐसा है जो क्रोम एक्सटेंशन कर सकता है?

संपादित करें:

स्पष्टीकरण - मुझे पता है कि देव टूल्स विंडो को अनडॉक कैसे करें (यह मेरा डिफ़ॉल्ट सेटअप है)। बस लालची होने के नाते मुझे लगता है और सोच रहा हूं कि क्या मैं आगे Sourcesऔर Consoleअलग खिड़कियों में विभाजित कर सकता हूं (या बहुत कम से कम, उनके विचार एक ही खिड़की पर लंबवत रूप से विभाजित होते हैं, बजाय क्षैतिज रूप से दबाने के रूप में Esc)

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

— हिमांशु पी
स्रोत

176

लंबवत विभाजन

आप डेवलपर टूल (नीचे-बाएं कोने में आइकन पर क्लिक करके) को अनडॉक कर सकते हैं, जो इसे एक नई विंडो में ले जाता है। फिर Escकंसोल खोलने के लिए दबाएं ।

खिड़की और "छोटे कंसोल" दोनों को आपकी आवश्यकताओं को पूरा करने के लिए आकार बदला जा सकता है।

क्षैतिज विभाजन

यदि आप नीचे के बजाय दाईं ओर कंसोल रखना पसंद करते हैं, तो ~~संपादन द्वारा डेवलपर टूल को कस्टमाइज़ करेंpath/to/profile/Default/User StyleSheets/Custom.css~~ , और निम्नलिखित नियम जोड़ें:

EDIT: के लिए समर्थन 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एक अलग खिड़की की तरह, जैसे आप क्रोम पर नियमित टैब के साथ कर सकते हैं

— हिमांशु पी

दूरस्थ डीबगिंग सक्षम करें , और एक नई विंडो में devtools खोलें। मुझे यकीन नहीं है कि यह पहले से ही कई उदाहरणों का समर्थन करता है, आपको इसे आज़माना चाहिए।

— रॉब डब्ल्यू

आशाजनक लगता है (हालांकि जटिल)। इसे आजमाएंगे और पोस्ट करेंगे कि यह कैसे काम करता है

— हिमांशु पी

1

@ हिमांशु रिमोट डिबगिंग अभी तक कई उदाहरणों का समर्थन नहीं करता है। मैंने एक वैकल्पिक विधि के साथ अपना उत्तर अपडेट किया है, इसे देखें।

— रॉब डब्ल्यू

1

मैं सिर्फ खड़ी-विभाजित कंसोल को बंद करने के लिए एक रास्ता ढूंढ रहा था जो हमेशा दिखाई देता था। Escइसे किया। धन्यवाद!

— ड्यूमा

100

esc - शॉर्टकट है,

या

पर menu(the three dots)क्लिक करेंshow console drawer

— BHV
स्रोत

3

एक दशक में एक बार मैं एक फीचर के लिए शिकार करता हूं और यह पता चलता है कि मेरे कीबोर्ड पर एक बटन था। की तरह।

— बॉब स्टीन

10

दाईं ओर "तीन डॉट्स" दबाएं और "शो कॉर्नर ड्रॉअर" पर क्लिक करें

— सोहम मेहता
स्रोत

7

ओपी शायद तीन साल पहले इस पोस्ट करने के बाद से चले गए हैं, लेकिन किसी और के लिए:

मुझे डेवलपर टूल विंडो को विभाजित करने के किसी भी तरीके का पता नहीं है, लेकिन आप ऊर्ध्वाधर, क्षैतिज और ऑटो (डिफ़ॉल्ट) पैनल लेआउट के बीच स्विच कर सकते हैं, जो ओपी ने उनके स्पष्टीकरण के बारे में पूछा था। मैंने अक्सर इसे उपयोगी पाया है।

देव टूल विंडो के ऊपरी दाएं कोने में तीन-डॉट मेनू खोलें।
'सेटिंग' चुनें।
"सामान्य" टैब -> "उपस्थिति" अनुभाग
"पैनल लेआउट"

— Pogginhopper
स्रोत

मैं इस जवाब की लंबे समय से तलाश कर रहा हूं। धन्यवाद! जब मेरी स्क्रीन पूरी चौड़ाई में नहीं थी, मेरे मामले में, पैनल नीचे की ओर लंबवत खड़े होंगे। यह मेरे लिए बहुत उल्टा था, क्योंकि मैं चाहता था कि पैनलों के समूह नीचे-किनारे हों, न कि खड़ी-खड़ी। लेआउट आइकन पर क्लिक करने से मुझे वह लेआउट नहीं मिला जो मैं चाहता था, लेकिन आपका समाधान ठीक उसी तरह काम करता है जैसा मैं चाहता था।

— क्रिस 22

हर बार जब मैं एक नए कंप्यूटर पर जाता हूं तो मुझे यह पता लगाना होता है कि इस सेटिंग को कैसे खोजना है और अपना पसंदीदा लेआउट कैसे प्राप्त करना है। धन्यवाद!

— स्टेसीहॉर्टन

5

एक आसान उपाय यह है कि नीचे के बाएं आइकन को दबाकर रखा जाए, जो दूसरे आइकन को पॉप अप करेगा, जिसे चुने जाने पर, आप अपने मुख्य ब्राउज़र विंडो के दाईं ओर कंसोल को देख पाएंगे।

— लॉयड मूर
स्रोत

यह वास्तव में स्वीकृत उत्तर होना चाहिए क्योंकि यह दोनों सही और "स्पष्ट" है

— चमत्कारिक

नोट: क्रोम के हाल के संस्करणों में (2015-03-18 के अनुसार), डॉक-बॉटम और डॉक-साइड मोड से बचने के लिए यह अनिवार्य है - यानी आप एक अलग विंडो चाहते हैं।

— मैक्सकफ्राँज

1

@miraculixx नहीं, यह सही नहीं है। ओपी में पहले से ही एक अचंभित DevTools विंडो है।

— jpaugh

1

"नीचे बाएँ आइकन" (इस टिप्पणी की तारीख के अनुसार मेरे लिए कुछ भी नहीं) की भावना नहीं कर सकते हैं

— Pac0

2

यदि आप टाइप कर सकते हैं, लेकिन कंसोल नहीं देख सकते हैं और इसे आकार नहीं दे सकते हैं:

फिर ऊपरी-दाएं कोने में DevTools को अनडॉक करें । तब आप इसका आकार बदल सकेंगे:

इसके बाद आप इसे वापस डॉक कर सकते हैं।

— गेन्नेडी जी
स्रोत