Chrome Developer Tools සිංහලෙන් Sources tab එකෙන් වැඩ ගමු

කලින් post එකෙන් resources, network tab 2 ගැන කතා කලානේ. මේ post එකෙන් අපි sources tab එක front end development වලට උදව් කර ගන්න හැටි බලමු.

chrome වල තියෙන javascript engine එකට කියන්නෙ V8 JavaScript Engine කියලා ඒකේ debugger (ඒ කියුවෙ debuging, එහෙමත් නැතිනම් code වල වැරදි හොයන්න පාවිච්චි කරන tool එකක්) එකට GUI interface එකක් සපයනවා. මේක පාවිච්චි කරලා අපට පුලුවන් code එකේ වැරදි හොයන්න. විවිධාකාරයේ breakpoint සෙට් කරලා ඒ ඒ අවස්තා වලදි code එකේ හැසිරීම බලාගන්න මේකෙන් අවස්ථාව උදාවෙනවා. එතකොට ඒ අවස්ථාවල අවුලක් එහෙම තියෙනවා නම් ගොඩ දාගන්න ලේසියි.

පහල රූපේ තියෙනව tools ටික.(ලොකු කරල බලන්න click කරන්න.)

එහෙනම් video එක බලන්නකෝ, ම්ම් video වැඩේ set වෙන්නෙ නෑ වගේ නම් comment එකක් දාන්නකෝ, එහෙනම් රචනාවක් වගේ දෙන්න පුලුවන් නෙ :-P

මේ තියෙන්නෙ debugging වලදි යොදා ගන්න පුලුවන් shortcut ටික.

• Continue: F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
• Step over: F10 or Command-' (apostrophe) on Mac or Control-' (apostrophe) on other platforms.
• Step into: F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
• Step out: Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on other platforms.
• Next call frame: Control-. (period) on all platforms.
• Previous call frame: Control-, (comma) on all platforms.

ඊලග post එකෙන් අපි sources tab එක exception handling වලට උදව් කර ගන්න හැටි කතා කරමු. google developers site එකේ Chrome DevTools ගැන තියෙන මේ page එකෙන් ඔයාලට වැඩිපුර දේවල් බලා ගන්න පුලුවන්. තවත් post එකකින් හමු වන තුරු ජය වේවා.

(මම පාවිච්චි කරපු file ටීක ඕනෙ නම් මෙතනින් download කර ගන්න)

Chrome Developer Tools සිංහලෙන් (resources, network tabs)

නිවාඩුවේ අන්තිම ප්‍රථිපලය විදියට ඊයෙ video එක නම් හදා ගත්තා. අද තමයි යාලුවනේ post කරන්න වෙන්නෙ. කලින් post එකේ video එකක් දැම්මෙ නෑ, හරි සද්ද බද්ද ගෙවල් පැත්තෙ ;-) ඒ උනාට අවුලක් නැතිව කරගන්න ඇතිනෙ :-)

අපි අද post එකෙන් chrome DevTools වල resources tab එකයි network tab එකයි ගැන කතා කරමු. ගොඩක් දේවල් කියන්න නෑ video එක බලන්නකෝ..අහ් කියන්න ඕනේ video එකේ size එක අඩුයි කලින් ඒවට වඩා ඉවර වෙන්නම බලන්න..net බිලත් මේ මාසේ වැඩිවෙන නිසා size එක අඩු කරා කොහොම හරි..එහෙනම් තවත් post එකකින් හමුවනතුරු ජය වේවා!

Chrome Developer Tools වෙනස්කම් එසැනින් save කරමු

කොහොමද යාලුවනේ..කලින් post එකෙන් අපි chrome DevTools පාවිච්චි කරන්නෙ කොහොමද කියලා කතා කරානෙ. අද අපි බලමු ඒ කරපු වෙනස්කම් කරනකොටම save කර ගන්නෙ කොහොමද කියල. ඒදා නම් මම දැනන් හිටපු ක්‍රමේ පොඩි අවුල් වගයක් තිබුන එක නිසා ඒ ගැන කියන්න බැරි උනා. ඒත් අද +Supun Kannangara ඇහුවා මේක මෙහෙමම save කර ගන්න බැරිද කියලා..ඔන්න එතකොට තමයි මට google පිහිට උනේ. අන්තිමට හොයා ගත්ත ක්‍රමයක්, tincr.

මේක chrome extension එකක් chrome web store එකෙන් ඔයාලට පුලුවන් මේ link එකෙන් ගිහින් tincr extension එක install කර ගන්න. මේ තියෙන්නෙ එයාලගෙ home page එක ඒකෙන් ඔයාලට වැඩිදුර දේවල් දැන ගන්න පුලුවන්. අපි දැන් බලමු මේක install කර ගත්තට පස්සෙ වැඩ කරන්නෙ කොහොමද කියල.

ඒක install උනාට පස්සෙ අලුතෙන් tab එකක් ඇවිත් ඇති devtools වලට මේ විදියට. (රූප ලොකු කරල බලන්න click කරන්න)

ඒ tab එකට ගියාම මේ වගේ configuration හදන්න කොටසක් ඒවි.

ඒකෙ project type එකට http web server කියන එක තෝරන්න. css file වලට ඒ option එක හරියනවා. අනිත් ඒවා අත් හදා බලන්න කැමතිනම් එයාලගෙ home page එකට හරි google group එකට හරි ගිහින් බලන්න. ඒ option එක තේරුවට පස්සෙ  project එකේ root directory එක තෝරන්න වෙනවා. ඒක browse කරල තෝරලා දෙන්න. මේකෙන් කරන වෙනස් කම් save වෙන්නෙ වෙනමම CSS file එක තිබුනොත් විතරයි. html file වල inline style නම් වෙනස් වෙන්නෙ නෑ. ඒක නිසා ඒ වගෙ ප්‍රොජෙක්ට් එකක් තෝරගත්තොත් හොදයි. කොහොමටත් inline style bad practice එකක්ලු නෙ ;-). folder එක browse කරාට පස්සෙ මේ වගේ හරි ලකුනක් වැටුනොත් වැඩේ හරි :-).

ඊට පස්සෙ යට තියෙන Auto-Refresh, Auto-Save check box දෙකට tick දාන්න. කරන වෙනස්කම් console එකේ log message විදියට වැටෙන්න ඕනෙ නම් Enable Logging එකත් tick කරන්න. ඒකත් වුවමනා වේවි කලින් තිබුන style එහෙම අමතක උනොත්. ඊට යටින් resources කියල project එකේ file ටික වැටෙයි. ඒවගෙ path එහෙම වෙනස් කරන්න ඕනෙ නම් change file path ලින්ක් එකෙන් file එකේ අලුත් path එක දෙන්න පුලුවන්. ඒ වගේම file එකකට හෝ කීපයකට dev tools වල වෙනස් කම් වෙන්න ඕනෙ නැත්නම් clear file path තෝරන්න පුලුවන්. 

මේ තියෙන්නෙ කලින් පොස්ට් එකෙ html page එකමයි. අලුතින් css file එකක් attach කලා. මම DevTools වල කරපු වෙනස් කම් එසැනින්ම save වෙලා තියෙනව මේ රූපෙ තියෙනවා. මේ tool එකත් web design වලදි ඔයාලට ගොඩක් ප්‍රයෝජනවත් වේවි, තවත් post එකකින් හමුවෙන තුරු ජය වේවා එහෙනම්! :-)

*windows 8 පාවිච්චි කරන අයට

මේ extension එක windows 8 වල install කරන්න ගියාම මේ වගේ "This application is not supported on this computer. Installation has been disabled." error එකක් එනවා කියලා දැන ගන්න හම්බ උනා.

ඔයාලටත් එහෙම error එකක් ආවා නම් මේ step ටික කරලා බලල කියන්නකෝ :-)

1. chrome.exe එක හොයා ගන්න. (C:\program filesx86\google\chrome\application) ඊට පස්සෙ right click කරලා properties ගිහින් compatibility tab එකේදී winodws 7 වල run වෙන විදියට හදන්න.

2. කලින් විදියටම tincr install කරන්න. ඊට පස්සෙ chrome වලින් exit වෙන්න.

3. දැන් ආපහු chorm.exe එකට ගිහින් compatibility mode එක අයින් කරන්නකෝ.  ඊට පස්සෙ chrome වලින් exit වෙන්න.

4. හරි දැන් වැඩ කරයි :-). වැඩ කරේ නැත්නම් කියන්නකෝ. :-)

Chorme Developer Tools සිංහලෙන්

කොහොමද යාලුවනේ..බ්ලොග් එක පටන් අරන් ගොඩක් කල් ගියා. post තුනකින් ඒක නැවතුන එක ගැන හරිම කනගාටුයි. :-( ඒත් ආයෙ එහෙම කරන්නෙ නෑ කියල පොරොන්දුවකුත් එක්ක ආපහු පටන් ගන්නයි යන්නෙ. නවත්තපු post එකෙන්ම පටන් ගත්තොත් එපා වේවිද දන්නෙ නෑනෙ, ඒක නිසා අලුත් පැත්තකට යන්න හිතුවා. නවත්තපු ටිකත් අපහු ලියනවා අනිවා ;-).

වැඩි කතා ඕනේ නෑ, අලුත් මාතෘකාව විදියට තෝර ගත්තෙ chrome developer tools, වෙබ් පැත්තෙ වැඩ කරන අය බොහෝ දෙනෙක් මේ ගැන දන්නවා. නොදන්න අයට දැන ගන්නයි දන්න කට්ටියට තවත් හොදට දැන ගන්නයි පොඩ් tutorial එකක් හදන්න හිතුනා. මේ ගැන ගොඩක් දේවල් තියනවා ඔක්කොම එක video එකකින් නම් කියන්න බැරි වේවි. ඒක නිසා 2ක් 3ක් කරන්න වේවි සමහර විට, බලලා දැනගන්න දෙයක් හරි, කියන්න දෙයක් හරි තියෙනවා නම් comment එකක් දාන්න.

Google Chrome web browser එකේ වගේ අනිත් ජනප්‍රිය බොහොමයක් web browsers වල developer tools වගේ පහසුකම් තියෙනවා. කට්ටිය පුදුම වෙයි අලුත් IE වලත් එකක් තියෙනවා. සැක නම් F12 ඔබලා බලන්නකෝ ;-). ගොඩක් browsers වල shortcut key එක F12 හෝ ctrl + shift + I. Opera අලුත් version වල තියෙන tool එක සෑම අතින්ම වගේ chrome developer tools වලට සමානයි. firefox වලත් මේ වගේ tool එකක් තියෙනවා. firefox වලට නම් firebug කියල extension එකක් තියනවා ගොඩක් ප්‍රසිද්ධ, මේ ඔක්කොම පාවිච්චි කරල බලල තමන්ට සුදුසු එකක් තෝර ගත්තොත් ඔයාලගෙ web developing වැඩ ගොඩක් ලෙසි වේවි. මම නම් තෝර ගත්තෙ chorme developer tools :-D ඔයාලටත් එකක් තෝරගන්න මේ post එක උදව් වේවි කියලා හිතනවා.