🐴 👼🏾 🤳🏽 वेब एप्लिकेशन डीबग करना और प्रोफाइल करना प्रारंभ करें ⏫ 👙 🔆

प्रविष्टि

होबे पर कई लेख हैं जो वेब विकास के दिलचस्प और जटिल पहलुओं का वर्णन करते हैं, लेकिन कई पाठक हैं जो वेब डेवलपर के रूप में अपने करियर की शुरुआत में, ऐसी सामग्री देखना चाहेंगे जो आपको "24 घंटों में PHP" से पहला कदम उठाने की अनुमति देगा। एक गंभीर स्तर पर विकास, और मैं इस मामले में अपने अनुभव को साझा करना चाहूंगा।

वेब एप्लिकेशन की विशेषताएं इसे दो भागों में विभाजित करती हैं: क्लाइंट और सर्वर। क्लाइंट पक्ष पर, जावास्क्रिप्ट कोड काम कर रहा है (हो सकता है कि VBScript कहीं मिल जाए, लेकिन हम शायद इस मामले पर विचार नहीं करेंगे), सर्वर की तरफ बहुत सारी चीजें हैं, सिद्धांत रूप में, लेकिन हम PHP के लिए सबसे लोकप्रिय भाषा पर विचार करेंगे। वेब अनुप्रयोगों का सर्वर पक्ष। ग्राहक पक्ष पर फ़्लैश एप्लिकेशन डीबगिंग और प्रोफाइलिंग के बारे में बात करना भी दिलचस्प होगा, लेकिन कवर किया गया विषय पहले से ही व्यापक है, इसलिए अब इसे अकेले छोड़ दें।

HTML कोड के विश्लेषण और सत्यापन को क्लाइंट कोड डीबग करने के कार्यों के लिए भी जिम्मेदार ठहराया जा सकता है। ऐसा लगता है, यह पूरी तरह से प्रोग्रामिंग के क्षेत्र से नहीं, बल्कि महत्वपूर्ण भी है।

कुछ समस्याओं के कुछ हिस्सों को पहले से ही अन्य लेखों में माना गया है, और मैंने उन्हें लिंक प्रदान किए हैं।

डिबगिंग और प्रोफाइलिंग क्लाइंट कोड

जावास्क्रिप्ट कोड को डीबग करने का "क्लासिक" तरीका alert फ़ंक्शन और उसके डेरिवेटिव का उपयोग करना है। मुझे याद है कि अपने करियर की शुरुआत में मैंने व्यक्तिगत रूप से जावास्क्रिप्ट के लिए print_r फ़ंक्शन लिखा था, क्योंकि मैंने सरणियों और वस्तुओं पर डिबगिंग जानकारी को आउटपुट करने की क्षमता नहीं देखी थी। यह कुछ इस तरह देखा गया:

 function print_r(variable) { if (variable instanceof Array || variable instanceof Object) { var key; for (key in variable) alert(key + ' => ' + variable[key]); } else { alert(variable); } }

बेशक, भाषण की कोई रूपरेखा आयोजित नहीं की गई थी।

इस दृष्टिकोण के साथ, कंसोल ऑब्जेक्ट के बारे में भी जानकारी क्रांतिकारी है।

वेब एप्लिकेशन के क्लाइंट पक्ष की बारीकियों को सभी लोकप्रिय ब्राउज़रों में कोड डीबगिंग की आवश्यकता होती है। बेशक, इंटरनेट एक्सप्लोरर और किसी भी ~~सामान्य~~ अन्य ब्राउज़र में डिबगिंग अक्सर पर्याप्त होती है, लेकिन हम सभी विकल्पों पर विचार करेंगे।

मोज़िला फ़ायरफ़ॉक्स

शायद डीबगिंग क्लाइंट कोड में फ़ायरफ़ॉक्स को अग्रणी कहा जा सकता है। लंबे समय तक इसे ब्राउज़र के विकास के लिए सबसे उपयुक्त के रूप में इंगित किया गया था, और सभी फायरबग एक्सटेंशन के लिए धन्यवाद, जिसमें संभवतः HTML कोड को छोड़कर सभी आवश्यक विशेषताएं शामिल हैं।

इसके अलावा, संस्करण 4 से शुरू होकर, एक अंतर्निहित वेब कंसोल दिखाई दिया है, जो फायरबग के कंसोल और नेटवर्क टैब के कार्यों के साथ-साथ कुछ सीएसएस डीबगिंग क्षमताओं के भाग को लागू करता है।

संस्करण 6 से शुरू होकर, एक सरल जावास्क्रिप्ट संपादक दिखाई दिया, जो फायरबग के कार्यों में से एक को लागू करता है, और आपको सीधे ब्राउज़र में कोड लिखने और निष्पादित करने की अनुमति देता है।

संस्करण 10 से शुरू होकर, पृष्ठों का निरीक्षक दिखाई दिया, जो आपको HTML कोड और CSS गुणों का अध्ययन करने की अनुमति देता है, अर्थात यह HTML टैब के कार्यों को कार्यान्वित करता है।

HTML कोड के सत्यापन के लिए, Html Validator एक्सटेंशन आमतौर पर जिम्मेदार होता है। साइट के मुख्य पृष्ठ habrahabr.ru पर त्रुटियों की संख्या को इंगित करने वाले बस इसके आइकन को पेज इंस्पेक्टर के साथ चित्र में ब्राउज़र के निचले दाएं कोने में देखा जा सकता है।

इसके अलावा, इस अवसर को लेते हुए, मैं यह इंगित करूंगा कि इस ब्राउज़र के लिए कई एक्सटेंशन हैं जो जीवन को आसान बनाते हैं, जिसके बारे में पहले से ही हैबे पर एक लेख था।

Google Chrome और Safari

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

क्रोम में, इसे Ctrl+Shift+I या सिर्फ F12 दबाकर बुलाया जा सकता है। यह सफारी में अच्छी तरह से छिपा हुआ है, और इसका उपयोग करने के लिए आपको अपनी ब्राउज़र सेटिंग्स में विकास सुविधाओं को सक्षम करने की आवश्यकता है। बाद में, डेवलपर के टूल मुख्य मेनू के "डेवलपमेंट" आइटम या कीबोर्ड शॉर्टकट Ctrl+Alt+I

HTML कोड को मान्य करने के लिए, आपको तृतीय-पक्ष एक्सटेंशन स्थापित करने की भी आवश्यकता है। उदाहरण के लिए, क्रोम के लिए, यह वैधता हो सकती है। अभी तक, सफारी कुछ भी उपयुक्त खोजने में कामयाब नहीं हुआ है।

ओपेरा

ओपेरा में एक अंतर्निहित डेवलपर टूल भी है, जिसे "ओपेरा ड्रैगनफ्लाई" कहा जाता है, और इसे किसी भी समय कीबोर्ड शॉर्टकट Ctrl+Shift+I का उपयोग करके कॉल किया जा सकता है Ctrl+Shift+I यह वैसा ही है जैसा कि WebKit हमारा प्रतिनिधित्व करता है, और इसमें समान क्षमताएं और फायदे हैं, हालांकि, मेरी राय में, यह कम सुविधाजनक है।

जैसा कि कॉमरेड हॉम ने सुझाव दिया था , ओपेरा के पास सत्यापनकर्ता के लिए एक सत्यापन पृष्ठ प्रस्तुत करने का एक सरल साधन है ।w3.org । साइट के प्रदर्शन क्षेत्र के संदर्भ मेनू में एक आइटम "वेब मानकों का अनुपालन किया जाता है" है, जो इसके लिए बिल्कुल जिम्मेदार है।

ओपेरा निर्देशिका में HTML सत्यापन के लिए एक्सटेंशन के साथ, स्थिति तनावपूर्ण है। इस कारण से, मान्य एक्सटेंशन का कोई विकल्प नहीं है।

इंटरनेट एक्सप्लोरर

संस्करण 8 से शुरू होकर, डेवलपर टूल यहां दिखाई दिए। यह अन्य ब्राउज़रों के मामले में लगभग वैसी ही क्षमताएं प्रदान करता है, लेकिन, जैसा कि इसकी गतिविधियों के अन्य पहलुओं में है, Internet Explorer उन्हें कुछ सुविधाएँ और अवर्णनीय अनुग्रह प्रदान करता है। एक महत्वपूर्ण बिंदु पुराने संस्करणों, साथ ही संगतता मोड का अनुकरण करने की क्षमता है।

यह आमतौर पर स्वीकार किया जाता है कि 7-7 संस्करणों में, जिस पर कोडर और जेएस-प्रोग्रामर के आँसू के समुद्र फैल गए, ऐसे कोई उपकरण नहीं हैं। एक तीसरा पक्ष समाधान है, Companion.JS, जिसके बारे में एक संबंधित लेख था । बेशक, इसकी क्षमताएं सामान्य टूल से काफी कम हैं, लेकिन यह टूल आपको कम से कम "अलर्ट-ओरिएंटेड डीबगिंग" से अधिक उन्नत कोड को डीबग करने की अनुमति देता है।

कॉमरेड एटीडी ने सुझाव दिया कि इन लंबे समय से पीड़ित संस्करणों के लिए, इंटरनेट एक्सप्लोरर डेवलपर टूलबार नामक एक "देशी" टूल था, लेकिन इसके लिए एक अलग स्थापना की आवश्यकता थी: www.microsoft.com/download/en/details.aspx?id=18359

इसके अलावा, कॉमरेड k12th ने याद किया कि यदि आपके पास विजुअल स्टूडियो है, तो आप इसमें कोड ("वेब डेवलपमेंट टूल्स" के घटक) डिबग कर सकते हैं। आप विज़ुअल वेब डेवलपर एक्सप्रेस के मुफ्त संस्करण के बारे में भी जानकारी पा सकते हैं।

डिबगिंग और प्रोफाइलिंग सर्वर कोड

Xdebug

जैसा कि हम शुरुआत में सहमत थे, हम उस मामले पर विचार करते हैं जब सर्वर पर PHP का उपयोग किया जाता है। यहां "क्लासिक" डिबगिंग विधि echo , print_r और var_dump , लेकिन एक डिबगिंग टूल भी है, जैसा कि सर्वश्रेष्ठ घरों में - एक्सडेबग । मेरे लिए व्यक्तिगत रूप से, संस्थान में अध्ययन की बारीकियों के संबंध में, यह "डेल्फी में जैसा था" देखा।

Xdebug एक्सटेंशन आपको कम से कम कोड चरण को चरणबद्ध तरीके से चलाने और चर के मूल्यों को देखने की अनुमति देता है, जो PHP प्रोग्रामिंग को एक नए स्तर पर ले जाता है। Xdebug के साथ काम करने की पेचीदगियों पर एक लेख था । XDebug आमतौर पर GNU / Linux रिपॉजिटरी में उपलब्ध है, विंडोज पर, dll फ़ाइल को कॉपी करके इंस्टॉल करना भी मुश्किल नहीं है।

इस एक्सटेंशन का उपयोग करते समय, एक इनकमिंग कनेक्शन (डिफ़ॉल्ट रूप से पोर्ट 9000) सर्वर से डेवलपर के कंप्यूटर पर आता है, जिसे इसे प्रोसेस करना होगा। ऐसा करने के लिए, आपको अपने आईडीई को तदनुसार कॉन्फ़िगर करना होगा।

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

XHProf

विस्तार के बारे में

हां, xdebug प्रोफाइलिंग क्षमताएं प्रदान करता है, लेकिन मुझे व्यक्तिगत रूप से इस उद्देश्य के लिए XHProf का फेसबुक विकास पसंद है। मैंने ईमानदारी से कोई परीक्षण नहीं किया है, लेकिन यह माना जाता है कि यह विस्तार उत्पादन-सर्वर के लिए और वास्तविक भार के तहत प्रोफाइलिंग के लिए बेहतर है।

स्थापना

दुर्भाग्य से, यह विस्तार किसी भी रिपॉजिटरी में शामिल नहीं है। यह PECL का हिस्सा है, लेकिन किसी कारण से, इसे नियमित रूप से स्थापित करने से अक्सर समस्याएं होती हैं। इस कारण से, आपको स्रोत से इंस्टॉल करना होगा।

 #   wget http://pecl.php.net/get/xhprof-0.9.2.tgz #   tar -xvf xhprof-0.9.2.tgz #   ,     cd xhprof-0.9.2/extension/ #     phpize ./configure make make test #    checkinstall

xhprof.ini कॉन्फ़िगरेशन xhprof.ini हमें निम्नलिखित सुविधाएँ प्रदान करती है:

[xhprof]
extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
;
xhprof.output_dir="/var/log/xhprof/"

रूपरेखा

निर्देशिका जो हमें संग्रह को अनपैक करके प्राप्त होती है, उसमें विस्तार स्रोतों के अलावा, प्रोफाइलिंग परिणामों के अध्ययन के लिए एक वेब इंटरफ़ेस और एप्लिकेशन को प्रोफाइल करने के लिए एक पुस्तकालय शामिल है।

हम प्रोफाइलिंग का एक उदाहरण देते हैं। निम्नलिखित तत्वों को आवेदन कोड में शामिल किया जाना चाहिए:

 //  ,   //    ,     xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* *    */ //  ,  , //     $xhprofData = xhprof_disable(); include_once XHPROF_DIR.'/xhprof_lib/utils/xhprof_lib.php'; include_once XHPROF_DIR.'/xhprof_lib/utils/xhprof_runs.php'; $xhprofRuns = new XHProfRuns_Default(); $namespace = 'some-unique-name'; $runId = $xhprofRuns->save_run($xhprofData, $namespace); echo "<!-- ", $runId, ' ', $namespace, " -->\n";

यहां निरंतर XHPROF_DIR निर्देशिका को इंगित करता है जहां हमने डाउनलोड किए गए संग्रह को अनपैक किया है।

परिणामों का विश्लेषण करने के लिए आपको उसी वेब इंटरफ़ेस की आवश्यकता होती है। यह $XHPROF_DIR/xhprof_html/ में लिया जा सकता है - हम इस तरह से मनमाने ढंग से निरूपित करेंगे। उदाहरण के लिए, हमने इसे वेब सर्वर के लिए सुलभ स्थान पर रखा, और यह example.com/system/xhprof/ पर उपलब्ध है, फिर काम के परिणाम का विश्लेषण करने के लिए हमें इसे निम्नानुसार एक्सेस करने की आवश्यकता है:

example.com/system/xhprof/?run=%runId%&source=%namespace%

हमें एक समान परिणाम मिलता है:

प्रोफाइलिंग को एक निरंतर आधार पर एप्लिकेशन कोड में शामिल किया जा सकता है या, उदाहरण के लिए, ऐसा बनाया जाता है कि यह एक निश्चित संभावना के साथ या किसी निश्चित स्थिति की उपस्थिति से यादृच्छिक रूप से शुरू होता है। उदाहरण के लिए, इस तरह:

 $needProfiler = (mt_rand(0, 100) < 10 or isset($_COOKIE['xhprof'])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);

इस मामले में, आप ग्राहकों या संदेह से शिकायत कर सकते हैं, एक निश्चित समयावधि के लिए रूपरेखा परिणामों का उल्लेख कर सकते हैं। namespace पैरामीटर का उपयोग करके, आप यह निर्धारित कर सकते हैं कि एप्लिकेशन का कौन सा भाग (कौन सी स्क्रिप्ट, कंट्रोलर, एक्शन) प्रोफाइल किया गया था।

प्रोफाइलिंग SQL क्वेरीज़

एक नियम के रूप में, डेटाबेस के साथ काम करना एप्लिकेशन में अड़चन है। इस कारण से, क्वेरी प्रोफाइलिंग की सिफारिश की जाती है। उदाहरण के लिए, एक वर्ग के हिस्से पर विचार करें जो mysql एक्सटेंशन फ़ंक्शन के आसपास एक आवरण है। हां, मुझे पता है कि वे इस विस्तार को पसंद नहीं करते हैं और चाहते हैं कि उनकी मृत्यु किसी अच्छे पुराने IE6 से कम न हो। मैं उसे इस्तेमाल करने का आग्रह नहीं करता, बस यह वर्ग मेरी उंगलियों पर सही है।

 /** *  * @param string $sql  * @param array $params  * @param string $query   * @return array  */ public function query($sql, array $params = array(), &$query = '') { $start = microtime(TRUE); //  ,  ""  $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($sql, $time); //   } private function _addProfilerData($query, $time) { if (is_array(self::$profilerData)) { self::$profilerData[] = array( 'query' => $query, 'time' => $time ); } } public function __destruct() { if (is_array(self::$profilerData)) { $this->_writeProfilerData(); self::$profilerData = FALSE; } //    } private function _writeProfilerData() { $values = array(); foreach (self::$profilerData as $row) { $query = mysql_real_escape_string($row['query'], $this->con); $time = (float)$row['time']; $hash = crc32($row['query']); $values[] = "($hash, '$query', $time)"; } if ($values) { $strValues = implode(', ', $values); $sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VALUES $strValues"; @mysql_query($sql, $this->con); } }

यहां, क्वेरी प्रोफाइलिंग डेटा को profiler_queries टेबल में संग्रहीत किया जाता है। यह तालिका MyISAM या आर्काइव प्रकार की हो सकती है, क्योंकि वे लंबित आवेषण बनाने की क्षमता प्रदान करते हैं, जो कि प्रोफाइलिंग करते समय प्रतिक्रिया में अनावश्यक देरी पैदा नहीं करता है। इसके अलावा, तालिका में प्रश्नों की बेहतर खोज के लिए, टाइप INT का एक कॉलम बनाना बेहतर है, जहां क्वेरी की crc32 हैश लिखा जाएगा, जिस पर आपको एक इंडेक्स बनाने की आवश्यकता है।

निष्कर्ष

लेख काफी बड़ा निकला। शायद मैं यहाँ ऊपर चला गया और पहले से ही छुआ विषयों पर है, लेकिन अगर मैं नियत समय में इसी तरह के कुछ पढ़ा था - एक लेख जहां सभी जानकारी एक साथ इकट्ठा किया गया था और उपयोगी लिंक दिए गए थे, यह मेरे लिए अमूल्य होगा। मुझे उम्मीद है कि मेरा लेख आत्मज्ञान के मार्ग पर किसी की मदद करेगा।

वेब एप्लिकेशन डीबग करना और प्रोफाइल करना प्रारंभ करें