Monday, November 25, 2013

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


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

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




Tuesday, November 19, 2013

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. හරි දැන් වැඩ කරයි :-). වැඩ කරේ නැත්නම් කියන්නකෝ. :-)

Friday, November 15, 2013

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 එක උදව් වේවි කියලා හිතනවා.