google-chrome - क्रोम डेवलपर टूल्स को कैसे बदलें




google-chrome-devtools (7)

प्रति डिफ़ॉल्ट क्रोम विंडो के नीचे उपकरण खोले जाते हैं। यह एक विस्तृत स्क्रीन डिस्प्ले के लिए एक बदतर विकल्प है क्योंकि दाईं ओर खाली जगह खाली है लेकिन अतिरिक्त लंबवत स्थान नहीं है। दुर्भाग्यवश, मुझे उपकरण को दोबारा बदलने का कोई रास्ता नहीं मिला है। मैं उन्हें फायरबग के समान, पक्ष में रखना चाहता हूं।

मैं जो चाहता हूं उसका एकमात्र विकल्प देव उपकरण को अलग करना और क्रोम और टूल्स विंडो को साइड-बाय-साइड रखना है। यह आईडीई से ब्राउज़र तक त्वरित रूप से alt-tabbing के लिए बहुत सुविधाजनक नहीं है और फिर भी, इसलिए एक "एकीकृत" समाधान अच्छा होगा।

धन्यवाद।


Answers

अक्टूबर 2014 तक, संस्करण 39.0.2171.27 बीटा (64-बिट)

मुझे क्रोम वेब डेवलपर पैन में "सेटिंग" में जाना होगा और दाईं ओर डॉक किए जाने पर स्प्लिट पैनलों को लंबवत अनचेक करना होगा


संस्करण 56.0.2 9 24.87 जो मैं अभी में हूं, यदि आप डेस्कटॉप में नहीं हैं तो DevTools को स्वचालित रूप से हटा देता है। अन्यथा एक नया नया क्रोम टैब खोलें और DevTools को विंडो में वापस डॉक करने का निरीक्षण करें।


क्रोम 46 या नया

लंबवत इलिप्सिस बटन (⋮) पर क्लिक करें, फिर वांछित डॉकिंग विकल्प चुनें।

क्रोम 45 या पुराना

ऊपरी दाएं भाग में डॉक आइकन को लंबे समय तक रखें। यह डॉकिंग बदलने के लिए एक विकल्प पॉप अप करता है

HTML और CSS पैनलों के बीच विभाजन को बदलने के लिए, DevTools में सेटिंग (F1)> सामान्य> उपस्थिति> पैनल लेआउट में जाएं।


मेरे डॉक को दाईं ओर रखने के बाद (पुराने उत्तरों देखें), मैंने अभी भी पैनलों को लंबवत रूप से विभाजित किया है।

पैनलों को क्षैतिज रूप से विभाजित करने के लिए - और यहां तक ​​कि आपकी स्क्रीन चौड़ाई से भी अधिक प्राप्त करें - सेटिंग्स (नीचे दाएं कोने) पर जाएं, और 'दाईं ओर डॉक किए जाने पर लंबवत पैनलों पर लंबवत पैनल' पर चेक को हटा दें।

अब, आपके पास सभी पैनल बाएं से दाएं हैं: पी


डॉकिंग स्थिति टॉगल करने के लिए कीबोर्ड शॉर्टकट (साइड / नीचे)

CTRL + SHIFT + D

और वहां कई शॉर्टकट हैं जिन्हें आप जाकर देख सकते हैं

सेटिंग्स »शॉर्टकट्स , जैसा कि यहां प्रदर्शित किया गया है:

वैकल्पिक रूप से, CTRL + का उपयोग करें ? सेटिंग्स पर जाने के लिए, वहां से कोई बाईं ओर "शॉर्टकट्स" उप-आइटम तक पहुंच सकता है या आधिकारिक संदर्भ का उपयोग कर सकता है।


ऐसा लगता है कि यह ओवरलैपिंग विंडो वाले आइकन के रूप में नीचे बाईं ओर है और "अलग विंडो में अनदेखा करें।" टूलटिप।


लंबवत विभाजन

आप डेवलपर टूल को अनदेखा कर सकते हैं (नीचे-बाएं कोने में आइकन पर क्लिक करके), जो इसे एक नई विंडो में ले जाता है। फिर कंसोल खोलने के लिए 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;
}

नतीजा इस तरह दिखता है:







google-chrome google-chrome-devtools