[Google Chrome] Nework ÅÇ »ìÆ캸±â
PC WebÀ» °³¹ßÇÏ´ø, Mobile WebÀ» °³¹ßÇÏ´ø ¹Ýµå½Ã Network·Î ¼¹ö¿Í ÀÎÅÍÆäÀ̽º ÇÏ¿© µ¥ÀÌÅ͸¦ ÁÖ°í ¹Þ´Â ¾÷¹«°¡ ¹ß»ýÇÑ´Ù. À̶§ Æí¸®ÇÑ DebuggingÀ» ÇÒ ¼ö ÀÖ´Â Chrome °³¹ßÀÚ µµ±¸ÀÇ [Network] ÅÇÀ» »ìÆ캸µµ·Ï ÇÏÀÚ.
Chrome °³¹ßÀÚ µµ±¸´Â ÀÌÀü Æ÷½ºÆ®¿¡¼ ¾ð±ÞÇÑ ¹Ù¿Í °°ÀÌ [F12] Key³ª ¸¶¿ì½º ¹Ù·Î°¡±â ¸Þ´ºÀÇ [¿ä¼Ò°Ë»ç]¸¦ ¼±ÅÃÇÏ¸é ºÒ·¯¿Ã ¼ö ÀÖ´Ù. ±×·³ [Network] ÅÇÀÇ ±¸¼ºÀ» »ìÆ캸ÀÚ.
À§ ȸéÀº Naver¿¡¼ ´º½º ÇÑ °ÇÀ» Á¶È¸ÇßÀ» ¶§ÀÇ [Network] ÅÇÀ» CaptureÇÑ ¸ð½ÀÀÌ´Ù. ÇØ´ç ÆäÀÌÁö¸¦ Loading ÇÏ¸é¼ ¹ß»ýÇÑ Network ¿ä¼ÒµéÀ» ¸ðµÎ Recording ÇÏ¿© º¸¿©ÁØ´Ù. °³¹ßÀÚ µµ±¸ÀÇ [Network] ÅÇ¿¡ Á¢±ÙÇÑ °æ¿ì°¡ ¾Æ´Ï¶ó¸é ChromeÀº Network ¿ä¼Ò¸¦ Recording ÇÏÁö ¾Ê´Â´Ù. ¹Ýµå½Ã °³¹ßÀÚ µµ±¸ÀÇ [Network] ÅÇÀ» ¿°í ÀÖ´Â »óÅ¿¡¼¸¸ Recording ÇÏ°Ô µÈ´Ù. µû¶ó¼ ÇØ´ç ÅÇÀ» ¿´õ¶óµµ ÆäÀÌÁö¸¦ ÇÑ ¹ø ´õ »õ·Î°íħÇؾ߸¸ Recording µÈ ³»¿ëÀ» º¼ ¼ö ÀÖ´Ù.
µµ±¸»óÀÚÀÇ °¡Àå ¾Õ¿¡ À§Ä¡ÇÏ´Â ¹öÆ°Àº RecordingÀ» ÇÒÁö ¸»Áö ¼±ÅÃÇÏ´Â ¹öÆ°ÀÌ´Ù. ÇØ´ç ¹öÆ°ÀÌ »¡°£»öÀ̶ó¸é Recording »óÅÂÀ̸ç, ȸ»öÀ̶ó¸é ÇöÀ縦 Recording ÇÏ°í ÀÖÁö ¾ÊÀº »óÅÂÀÌ´Ù.
±× ¿·¿¡ ÀÖ´Â ¹öÆ°Àº ´©°¡ ºÁµµ, ÇöÀç Recording µÈ ³»¿ëÀ» »èÁ¦ÇÏ´Â ¹öÆ°ÀÌ´Ù. ÇØ´ç ¹öÆ°À» Ŭ¸¯Çϸé ÇöÀç â¿¡ ÀÖ´Â ³»¿ëµéÀÌ ¸ðµÎ Áö¿öÁø´Ù.
±× ´ÙÀ½ ¹öÆ°Àº °¢Á¾ Filter ¹öÆ°µéÀ» º¸¿©ÁÙÁö ¸»Áö ¼±ÅÃÇÏ´Â ¹öÆ°ÀÌ´Ù. [Network] ÅÇ¿¡¼´Â °¢Á¾ FilterµéÀ» Á¦°øÇÏ¿© Æí¸®ÇÏ°Ô ¿øÇÏ´Â ºÎºÐ¸¸ º¼ ¼ö ÀÖµµ·Ï ÇØÁÖÁö¸¸... °á±¹ ÀÚÁÖ º¸°Ô µÇ´Â ºÎºÐÀº XHR ¹Û¿¡ ¾ø´Â °Í °°´Ù. ¿©Æ° Filter ¹öÆ°À» Enable ÇÑ ¸ð½ÀÀº ¾Æ·¡¿Í °°´Ù.
±âº»ÀûÀ¸·Î All ÀÌ ¼±ÅõǾî ÀÖ°í, º¸°í ½ÍÀº Content TypeÀ» ¼±ÅÃÇÒ ¼ö ÀÖ°Ô µÇ¾î ÀÖÀ¸¸ç, ¸Ç ¾Õ ÅؽºÆ® ¹Ú½º¿¡ °ªÀ» ÀÔ·ÂÇÏ¿©¼µµ Filtering ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î HTTP Method °¡ POST ÀÎ ÀÎÅÍÆäÀ̽º¸¸ Filtering Çغ¸°í ½Í´Ù¸é method:POST ¶ó°í ÀÔ·ÂÇϸé Filtering µÈ´Ù. Filter ÅؽºÆ® ¹Ú½º¿¡ ÀÔ·ÂÇÒ ¼ö ÀÖ´Â Keyword µéÀº ¾Æ·¡¸¦ Âü°íÇÑ´Ù.
-. domain
-. has-response-header
-. is
-. larger-than
-. method
-. mime-type
-. scheme
-. set-cookie-name
-. set-cookie-value
-. set-cookie-domain
-. status-code
´ë° Àǹ̰¡ ¸íÈ®ÇÑ ¿ë¾îµéÀÌ¶ó ±¸Ã¼ÀûÀÎ ¼³¸íÀº »ý·«Çϸç À§ÀÇ ¿¹Á¦¿Í °°ÀÌ keyword:value Çü½ÄÀ¸·Î Filtering ÇÒ ¼ö ÀÖ´Ù.
Filtering ¹öÆ° Áß ÀÚÁÖ »ç¿ëÇÏ°Ô µÇ´Â XHR ¹öÆ°À» ÇÑ ¹ø Ŭ¸¯Çغ¸¸é Filtering µÇ¾î ¾Æ·¡¿Í °°Àº µ¥ÀÌÅÍ°¡ Ç¥½ÃµÈ´Ù.
XHR ÀÎÅÍÆäÀ̽º¸¸ Filtering ÇÑ °ÍÀ̸ç, ÇØ´ç ÀÎÅÍÆäÀ̽ºÀÇ Method³ª HTTP Response code, Content-Type, ¶Ç Capture¿¡´Â Àß·ÈÁö¸¸ Elapse time µîµµ Ç¥½ÃµÇ¾î Debugging¿¡ Æí¸®ÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ´Ù. ±×·³ À§ 3°³ÀÇ µ¥ÀÌÅÍ Áß list.json À» ÇÑ ¹ø Ŭ¸¯Çغ¸¸é ¾Æ·¡ ÅÇÀÇ ³»¿ëÀÌ º¯°æµÈ´Ù.
5°³ ÅÇÀÌ ÀÖÀ¸¸ç, À§ ±×¸²Àº Headers ÅÇÀÇ ³»¿ëÀÌ´Ù. Headers ÅÇ¿¡¼´Â URL, Method, Status Code µîÀÇ Á¤º¸¿Í Response, Request Header ¹× ¼¹ö·Î ¼Û½ÅÇÑ ³»¿ëÀ» º¼ ¼ö ÀÖ´Ù. Client È¸é °³¹ß ½Ã ¼¹ö¿Í µ¥ÀÌÅÍ°¡ Àß ¸ÂÁö ¾Ê´Â´Ù¸é ¼¹ö·Î º¸³½ ÃÖÁ¾ µ¥ÀÌÅ͸¦ È®ÀÎÇÒ ¼ö ÀÖ´Â ºÎºÐÀ̱⿡ °³¹ß ½Ã »ó´çÈ÷ ¸¹ÀÌ È°¿ëÇÏ°Ô µÇ´Â ³»¿ëÀÌ´Ù.
±× ¿·¿¡ ÀÖ´Â Preview ÅÇÀº ¼¹ö¿¡¼ ¼ö½ÅÇÑ µ¥ÀÌÅ͸¦ ¿¹»Ú°Ô Parsing ÇÏ¿© º¸¿©ÁÖ°í, ±× ¿·ÀÇ Response ÅÇÀº Parsing ÇÏÁö ¾Ê°í ³¯ °ÍÀ¸·Î º¸¿©ÁØ´Ù. µÎ ÅÇ ¸ðµÎ °¢ÀÚ ¾µ¸ð°¡ ÀÖÀ¸¸ç ¿¹Á¦´Â ¾Æ·¡¿Í °°´Ù.
[Preview] ÅÇ
[Response] ÅÇ
´ç¿¬È÷ º¸±â¿¡´Â Parsing ÇÑ ÇüÅÂÀÎ Preview ÅÇÀÌ º¸±â ÁÁÁö¸¸, Âß ±Ü¾î¼ µ¥ÀÌÅ͸¦ ÀçÈ°¿ëÇѴٰųª ³Ñ¾î¿Â ³¯ °Í ±×´ë·ÎÀÇ µ¥ÀÌÅ͸¦ ºÁ¾ßÇÒ ¶§ (¹¹ °£´ÜÇÑ ¿¹·Î ¼¹ö ¿À·ù·Î ¿Ã¹Ù¸¥ XML, JSON µ¥ÀÌÅÍ°¡ ³Ñ¾î¿ÀÁö ¾Ê¾ÒÀ» °æ¿ì) À¯¿ëÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ´Ù.
[Cookie] ÅÇ¿¡¼´Â ÆäÀÌÁö¿¡¼ »ç¿ëÇÑ Request / Response Cookie Á¤º¸¸¦ Á¶È¸ÇÒ ¼ö ÀÖÀ¸¸ç Timing Àº ÇöÀç ApplicationÀÇ Performance ¸¦ Á¡°ËÇØ º¼ ¼ö ÀÖ´Ù. Timing ¿¡ ´ëÇÑ ³»¿ëÀº À̾߱Ⱑ Á¦¹ý ±æ¾îÁú ¼ö ÀÖÀ¸¹Ç·Î º°µµ·Î Æ÷½ºÆÃÇÒ »ý°¢ÀÌ´Ù.
À̾߱Ⱑ ¾î¼´Ù°¡... ÀÌ·¸°Ô µÎ¼ ¾øÀÌ ºüÁ³Áö¸¸ ´Ù½Ã [Network] ÅÇÀÇ µµ±¸»óÀÚ¸¦ »ìÆ캸¸é ¾ÆÁ÷ µÎ °³ÀÇ ¹öÆ°ÀÌ ³²¾Ò´Ù. ¿·ÀÇ µÎ °³ÀÇ ¹öÆ°ÀÌ ³²¾ÒÁö¸¸, ÇØ´ç ¹öÆ°µéµµ °á±¹Àº Timing °ú °ü·ÃµÈ ³»¿ëÀ̹ǷΠ³ªÁß¿¡ ´Ù·ç±â·Î ÇÑ´Ù.
[Network] ÅÇ µ¥ÀÌÅ͸¦ Ç¥½ÃÇÏ´Â Header Á¤º¸´Â ±âº»ÀûÀ¸·Î ¾Æ·¡¿Í °°ÀÌ ±¸¼ºµÇ¸ç, Header¸¦ Ŭ¸¯Çϸé Header ±âÁØÀ¸·Î Á¤¹æÇâ/¿ª¹æÇâ SortÇÏ¿© µ¥ÀÌÅ͸¦ º¼ ¼ö ÀÖ´Ù.
±âº»ÀûÀ¸·Î´Â À§¿Í °°Àº µ¥ÀÌÅ͸¸ Ç¥½ÃµÇÁö¸¸, Header ºÎºÐÀ» ¸¶¿ì½º ¿ìŬ¸¯ÇÏ°Ô µÇ¸é Ç¥½ÃÇÏ°í ½ÍÀº µ¥ÀÌÅ͸¦ ¼±ÅÃÇÒ ¼ö ÀÖÀ¸¸ç, µ¥ÀÌÅÍ Á¾·ù´Â ¾Æ·¡ ±×¸²°ú °°´Ù.
À§ Selectbox ¿¡¼ ¼±ÅÃÇÑ µ¥ÀÌÅ͸¸ ¸ñ·ÏÀ¸·Î Ç¥½ÃµÈ´Ù.