| 10.07.2015

კოდზე მუშაობისას ძალიან ადვილია მძიმის ან ფრჩხილის გამოტოვება და გამოტოვება. და გრძელი არასამუშაო კოდის ხელახლა წაკითხვა ასეთი შეცდომის მოსაძებნად, ზოგადად, უმადურ ამოცანას წარმოადგენს. ამ შემთხვევაში, კოდის შემოწმება სპეციალური პროგრამული ინსტრუმენტებით დაგეხმარებათ. ჩვენი არჩევანი ეძღვნება JavaScript ენის რამდენიმე განსაკუთრებით პოპულარულ ვალიდატორს.

« JSLint შეურაცხყოფს თქვენს გრძნობებს" - ეს გაფრთხილება შეგიძლიათ იხილოთ JSLint ვალიდიატორის ვებსაიტზე, რომელიც 2002 წელს შეიქმნა დუგლას კროკფორდის მიერ. და ეს მართალია, რადგან ძალიან ხშირად JSLint აღმოაჩენს ბევრ შეცდომას იდეალურად მოქმედ კოდში. თუ თქვენ ცდილობთ გააუმჯობესოთ თქვენი კოდი და მიიყვანოთ ის იდეალურ მდგომარეობაში, გამოიყენეთ ეს სერვისი.

JSHint არის JSLint ვალიდიატორის უფრო მოსახერხებელი და კონფიგურირებადი და ასევე უფრო პოპულარული ვერსია. JSHint უპირატესობას ანიჭებს პროგრამისტებს მისი არჩევის პარამეტრებისა და წესების კოდების განხილვისთვის და გააჩნია კარგი დოკუმენტაცია. ადვილად ინტეგრირებულია რედაქტორებში.

ამ ხელსაწყოს ასევე აქვს საკმარისი საბაჟო წესები, რომელსაც შეიძლება ჰქონდეს დამატებითი კონფიგურირებადი პარამეტრები. ხელმისაწვდომია სხვადასხვა დანამატები. ESLint ადვილი გასაგებია და აქვს მრავალი ფუნქცია, რაც სხვა სერვისებს აკლია.

სს

JavaScript Code Style ინსტრუმენტი განსხვავდება წინადან იმით, რომ ის არ ამოწმებს კოდს პოტენციურ შეცდომებსა და შეცდომებზე. სსს-ის მიზანია კოდის სტილის დარღვევების შემოწმება და გამოვლენა. მომხმარებლებისთვის ხელმისაწვდომია მრავალი წინასწარ დაყენება და მზა კონფიგურაცია, რომელთა გამოყენება შეგიძლიათ დაუყოვნებლივ დაიწყოთ, თუ დაიცავთ იმავე კოდის სტილს.

3.6 5-დან

Სალამი ყველას!

დღეს ჩვენ გადავხედავთ, თუ როგორ შეგიძლიათ შეამოწმოთ თქვენი JS კოდის შესრულება და, შესაბამისად, მისი ოპტიმიზაცია.

ორიოდე თვის წინ დავწერე სტატია, რომელშიც განვიხილეთ, როგორ გამოვიყენოთ ეს კონსოლი. დღეს ჩვენ გამოვიყენებთ console.profile() მეთოდს და ვნახოთ, როგორ შეიძლება მისი გამოყენება სკრიპტების შესამოწმებლად და შემდეგ გასაუმჯობესებლად.

Sandbox

პირველ რიგში, მოდით შევქმნათ პატარა HTML დოკუმენტი, რომელიც შეიცავს რამდენიმე ელემენტს და კოდს, რომელსაც შევამოწმებთ.

JS სკრიპტების მუშაობის ტესტირება

რაღაც ტექსტი

• ზოგიერთი ელემენტი ტექსტით

console.profile() ;
// ჩვენ განვათავსებთ ჩვენს კოდს აქ
console.profileEnd();

თავად კოდი განთავსდება console.profile() და console.profileEnd() შორის.

ელემენტის არსებობის შემოწმება

ხშირად ხდება, რომ ერთი და იგივე სკრიპტები იტვირთება საიტის ყველა გვერდისთვის, ამიტომ ზოგჯერ საჭირო ელემენტები შეიძლება იქ არ იყოს. მიუხედავად იმისა, რომ jQuery არ შეასრულებს კოდს არარსებული ელემენტებისთვის, მაინც ჯობია შეამოწმოთ ელემენტების არსებობა. მოდით შევხედოთ კოდის ორ ვარიანტს და ყურადღება მივაქციოთ მათი შესრულების დროს. პირველი კოდი არ ამოწმებს:

Console.profile();


$("#mainItem");
console.profileEnd();

ამ კოდის შესრულების შედეგად მივიღებთ ამ სურათს Firebug კონსოლში:

მეორე კოდი ამოწმებს არის თუ არა ელემენტები, რომლებზეც მოქმედება უნდა შესრულდეს:

Console.profile() ;
var ele = $("#somethingThatisNotHere");
თუ (ელე) (
ele.text("ზოგიერთი ტექსტი").slideUp(300).addClass("რედაქტირება");
}
$("#mainItem");
console.profileEnd();

და ის გამოსცემს ამას კონსოლზე:

შედეგად, ჩვენ ვასკვნით, რომ უმჯობესია შევამოწმოთ ელემენტის არსებობა - შესრულების სიჩქარე უფრო დიდი იქნება. მაგრამ ეს არ ნიშნავს, რომ თქვენ უნდა შეამოწმოთ ყველაფერი: ჩვეულებრივ, არის ჯგუფის მთავარი ელემენტი, რომლის გარეშეც ყველა დანარჩენი მაინც ვერ იარსებებს. ეს არის ის, რაც უნდა შემოწმდეს.

სელექტორების ეფექტური გამოყენება

დიდი ალბათობით ჩემი წაკითხული გაქვს. თუ არა, მაშინ წაიკითხეთ. იქ ვისაუბრე იმაზე, თუ როგორ აანალიზებენ ბრაუზერები სელექტორებს და რომელი სელექტორები მუშაობენ რა სიჩქარით. მოკლედ, id სელექტორი მუშაობს ყველაზე სწრაფად, უნივერსალური კი ყველაზე ნელა.

მოდით გავაკეთოთ ექსპერიმენტი. გთხოვთ გაითვალისწინოთ, რომ სკრიპტის შესრულების სიჩქარე შეიძლება განსხვავდებოდეს სხვადასხვა კომპიუტერებიდა ბრაუზერები.

პირველ რიგში, შევეცადოთ შევარჩიოთ ელემენტები კლასის მიხედვით:

Console.profile() ;
$(".არჩეული");
console.profileEnd();

Console.profile() ;
$("li.selected");
console.profileEnd();

შედეგი 0.291 ms - შემცირდა 0.027 ms. ახლა მოდით დავაზუსტოთ სელექტორი: ელემენტები, რომლებიც გვჭირდება, უნდა იყოს კონტეინერის შიგნით id="someList"-ით:

Console.profile() ;
$("#someList .selected");
console.profileEnd();

0.283ms არის უმნიშვნელო გაუმჯობესება. მოდით დავაზუსტოთ სელექტორი ტეგის სახელით:

Console.profile() ;
$("#someList li.selected");
console.profileEnd();

მივიღეთ 0.275 ms. ახლა მოდით ავირჩიოთ ელემენტი პირდაპირ ID-ით მხოლოდ გასართობად:

Console.profile() ;
$("#mainItem");
console.profileEnd();

0.165ms არის ჩვენი ახალი რეკორდი. ახლა ვფიქრობ, გასაგებია, თუ როგორ უნდა დავწეროთ სელექტორები.

არასაჭირო ოპერაციების თავიდან აცილება

ზოგჯერ კოდი შეიძლება შეიცავდეს კონსტრუქციებს, როგორიცაა:

// რაღაც კოდი
$(ელემენტი).doSomething();

// შემდეგ მეტი კოდი
$(ელემენტი).doSomethingElse();

// და მეტი კოდი
$(ელემენტი).doMoreofSomethingElse();

არასოდეს გააკეთო ეს. ერთი საქონელი მოთხოვნილია არაერთხელ. ეს ძალიან ძვირია შესრულების თვალსაზრისით.

ავიღოთ ჩვენი ქვიშის ყუთი და ჩავატაროთ მსგავსი პროცესი მასში:

Console.profile() ;
$("#mainItem").დამალვა();
$("#mainItem").val("გამარჯობა");
$("#mainItem").html("გამარჯობა!");
$("#mainItem").show();
console.profileEnd();

ზემოთ მოყვანილი კოდი ასევე შეიძლება გაკეთდეს ჯაჭვის სახით:

Console.profile();
$("#mainItem").hide().val("Hello").html("Hello!").show();
console.profileEnd();

ჯაჭვის გამოყენებისას ელემენტს ითხოვენ ერთხელ და შემდეგ მასზე მითითება გადაეცემა მეთოდებს. ეს ამცირებს შესრულების დროს.

თქვენ ასევე შეგიძლიათ ელემენტის ქეშირება და მოქმედებების შესრულება უკვე ქეშებულზე:

Console.profile() ;
var elem = $("#mainItem");
elem.hide();
elem.val ("გამარჯობა");
elem.html ("ოჰ, ჰეი!");
elem.show();
console.profileEnd();

როგორც მაგალითებიდან ხედავთ, ქეშირება და სამოქმედო ჯაჭვების გამოყენება ამცირებს სკრიპტის შესრულების დროს.

ჭკვიანი DOM მანიპულირება

DOM (დოკუმენტის ობიექტის მოდელის) ოპერაციები, როგორიცაა ელემენტების მიღება ან ჩასმა, ცნობილია, რომ ძალზე ინტენსიური რესურსია. ვნახოთ, როგორ შეგვიძლია დავაჩქაროთ ეს ოპერაციები.

თანამედროვე ტენდენციებმა და ვებ აპლიკაციებმა რადიკალურად შეცვალეს დეველოპერების შესაძლებლობები. ეჭვგარეშეა, რომ მათ სჭირდებათ რაიმე სახის IDE ახალი ფაილების კოდირებისთვის და მათი შემდგომი განთავსებისთვის შესანახად. რა მოხდება, თუ უბრალოდ გამოსცადეთ კოდის ფრაგმენტები? საბედნიეროდ, დღესდღეობით, ამისთვის სხვადასხვა ხელსაწყოების დიდი არჩევანია!

ამ სტატიაში ვისაუბრებთ 15 ვებ აპლიკაციაზე ონლაინ კოდის ტესტირებისთვის. ისინი ყველა მუშაობენ მანამ, სანამ ინტერნეტთან ხართ დაკავშირებული; ზოგიერთი მათგანი გთავაზობთ პრო გეგმებს ქონების დამატებითი პაკეტისთვის. მათი უმეტესობა სასარგებლო იქნება Javascript-ის ან PHP-ის ნაწილების პოვნისა და გამართვის მცდელობისას.

1.კოდპადი

შექმნილია სტივენ ჰეზელის მიერ, არის უნიკალური ვებ აპლიკაცია, რომელიც საშუალებას გაძლევთ კოდის სინტაქსს ინტერნეტში. გამართვის გარდა, Codepad თავის მომხმარებლებს საშუალებას აძლევს დააკოპირონ/ჩასვან კოდების მნიშვნელოვანი ნაწილები და გააზიარონ ისინი ონლაინ.

გამომავალი ეკრანი აჩვენებს შეტყობინებებს თქვენს კოდთან დაკავშირებული ნებისმიერი შეცდომის შესახებ. მარცხენა მენიუში ღილაკების გამოყენებით შეგიძლიათ შეცვალოთ ენა (C/C++, Perl, PHP, Python, Ruby და ა.შ.). Codepad უფრო შექმნილია დეველოპერებისთვის პროგრამული უზრუნველყოფარომელთაც ერთად უნდა იმუშაონ და გამართონ ყველაზე პრობლემური პროგრამები.

2.დაწერეთ კოდი ონლაინ

მთავარი ვებსაიტი გადაგამისამართებთ თავის Java Script რედაქტორზე. თქვენ შეგიძლიათ აირჩიოთ JS, PHP და ძირითადი URL კოდირება. აპლიკაცია არა მხოლოდ უსაფრთხო და საიმედოა, არამედ საკმაოდ მარტივი გამოსაყენებელიცაა.

საინტერესოა, რომ თქვენ იხილავთ თქვენი მუშაობის შედეგებს ტექსტის ველის ქვემოთ. ასე რომ, თუ დააჭირეთ "გაშვების კოდს", შედეგი გამოჩნდება ეკრანზე. გამართვა დიდი PHP სკრიპტებიშეიძლება უფრო რთული იყოს, რადგან ის მოითხოვს სხვა ფაილების ჩართვას.

თუმცა, აპლიკაცია შეუცვლელ დახმარებას გაგიწევთ ახალი იდეის სიძლიერის შესამოწმებლად.

3.ტინკერბინი

მე შემიძლია მარტივად ვუწოდო მას ჩემი საყვარელი ონლაინ რესურსი კოდების რედაქტირებისთვის. იგი მხარს უჭერს HTML5/CSS3/JS და გამოაქვს შედეგი პირდაპირ ეკრანზე. აპლიკაცია ჯერ კიდევ ალფა განვითარების პროცესშია, მაგრამ ინსტრუმენტების უმეტესობა მშვენივრად მუშაობს და სწრაფად პოულობს შეცდომებს პროგრამებში.

რენდერის ძრავა მხარს უჭერს ენებს, როგორიცაა Coffeescript და Sass CSS-ში. ისინი ამაყობენ მოწინავე მენეჯმენტის სისტემით და მხარდაჭერით მრავალი ვებ დიზაინის ბრენდისთვის, რომელთა გამოყენება გირჩევნიათ შემდგომი მუშაობისთვის.

არ შეიძლება უგულებელვყოთ ის ფაქტი, რომ არსებობს ცხელი კლავიშები ყველაზე პოპულარული ვარიანტებისთვის. მაგრამ ასეთი ფუნქციონირება არ არის ნაპოვნი ყველა ვებ აპლიკაციაში, რომ აღარაფერი ვთქვათ ბრაუზერში ჩაშენებული კოდების რედაქტორებზე. ახალი ტეგების შეყვანისას, IDE ავტომატურად შემოდის ახალ ხაზებს. Tinkerbin არის ფრონტალური ინსტრუმენტი, რომელიც აუცილებლად უნდა იყოს თქვენი ვებ განვითარების ინსტრუმენტებში.

4.JS Bin

დამწყებთათვის, ინტერფეისთან მუშაობამ შეიძლება გამოიწვიოს გარკვეული სირთულეები. ამის თავიდან ასაცილებლად, მათ შეუძლიათ გამოიყენონ. JS Bin გთავაზობთ დიდი რიცხვიბიბლიოთეკებიდან ასარჩევად - jQuery, JQuery UI, jQM Prototype, MooTools და ა.შ.

თუ კოდირებთ სხვადასხვა ელემენტებს, პროექტები ავტომატურად შეინახება. გარდა ამისა, თქვენ გაქვთ შესაძლებლობა ჩამოტვირთოთ თქვენი სამუშაოს საბოლოო შედეგი ან შეინახოთ წყარო ონლაინ. ეს სისტემა უფრო შესაფერისია თქვენი კოდის ექსპორტისთვის და შესანახად, ვიდრე ჩვეულებრივი შაბლონი.

5.ჯსფიდლი

ყველას, ვინც ეწვია Stack Overflow-ს, უნდა იცოდეს შესახებ. მათი ინტერფეისი განსხვავდება JSBin-ისგან არსებობით მეტიშესთავაზა ვარიანტები.

ასევე მხარს უჭერს ბიბლიოთეკებს, როგორიცაა Prototype და jQuery. გარდა ამისა, თქვენ შეგიძლიათ შეიტანოთ დამატებითი გარე წყაროები JS/CSS ფაილებში ნებისმიერ დოკუმენტში, რომელსაც ამოწმებთ. გასაოცარია, რომ აპს აქვს XHP Ajax-ის მხარდაჭერაც კი, სადაც შეგიძლიათ გადასცეთ ინფორმაცია სერვერიდან კლიენტის ბრაუზერის ფანჯარაში და პირიქით.

6.CSSDdesk

ჩვენ გადავდივართ სკრიპტიდან სტილის ენაზე და . ყველაფერი დაახლოებით ისე გამოიყურება, როგორც წინა ინსტრუმენტებში: საწყისი ტექსტი არის მარცხნივ, საბოლოო ვებ გვერდი მარჯვნივ. ეს ვებ აპლიკაცია შესანიშნავია ვებ გვერდის შაბლონების შესაქმნელად და CSS3 თვისებების შესამოწმებლად.

7.ჯსდო.ის

ზოგიერთი აპლიკაცია იაპონურ ენაზეა, რაც მაფიქრებინებს, რომ ისინი სადმე აზიაში შეიქმნა. რაც ყველაზე მეტად მომწონს მათ ინტერფეისში არის ახლად შექმნილი ფაილების ატვირთვის და პროექტში შენახვის შესაძლებლობა. თქვენ შეგიძლიათ მარტივად შეინახოთ მთელი ვებ გვერდის განლაგება ონლაინ და შეხვიდეთ და შეცვალოთ ისინი ნებისმიერი კომპიუტერიდან.

8. Google Code Playground

გამიკვირდა, რამდენმა დეველოპერმა არ იცის არსებობის შესახებ. თქვენ მიიღებთ სრულ წვდომას მათ API-ზე და შეგიძლიათ გამართოთ ყველა თქვენი კოდი იმავე ფანჯარაში.

API-ში ვგულისხმობ, რომ თქვენ შეგიძლიათ მონაცემების ამოღება Google-ის უდიდესი პროდუქტებიდან: პოსტები Blogger-იდან, ღირშესანიშნაობები Google Maps-დან და ვიდეოებიც კი პირდაპირ YouTube-დან. როდესაც დააწკაპუნებთ სხვადასხვა ვარიანტზე, ფანჯარაში გამოჩნდება მონაცემები გადახედვაასევე განახლებულია.

მე გირჩევთ, რომ ეს ინსტრუმენტი მხოლოდ რესურსად შეინახოთ, რადგან ის არ იქნება შესაფერისი ყველაფრისთვის, რასაც წერთ. თუმცა, Google არის დიდი კომპანია, რომელსაც აქვს მრავალი წყარო კოდის მონაცემთა API. თუ ოდესმე დაგჭირდებათ მასალა YouTube ან Google საძიებოდან, ეს ინსტრუმენტი ნამდვილად გამოგადგებათ.

9.IDEOne

- კიდევ ერთი ინსტრუმენტი "ღრმა" პროგრამირებისა და პროგრამული უზრუნველყოფის განვითარებისთვის. მათი ონლაინ რედაქტორი მხარს უჭერს სინტაქსური ელემენტების ხაზგასმას მრავალი მნიშვნელოვანი ენისთვის, მათ შორის Objective-C, Java, C#, VB.NET, SQL და მრავალი სხვა. და ა.შ.

10.Viper7 Codepad

ეს ვებ აპლიკაცია, რომელიც ასევე ცნობილია როგორც , მდებარეობს საიტზე, სადაც ის გადამისამართდება იმავე ონლაინ რედაქტორზე. მათი ხელსაწყოები კონფიგურირებულია PHP გამომავალი ცვლადის გამართვისთვის, რომელიც თქვენი არჩევანის მიხედვით შეიძლება განსხვავდებოდეს PHP5-სა და PHP4-ს შორის.

ანგარიშის შექმნით, Codepad შეიძლება გამოყენებულ იქნას როგორც პირადი სისტემამონაცემთა საცავი. აქ, როგორც სხვა ონლაინ რედაქტორებში, შეგიძლიათ დაასახელოთ თითოეული PHP პროექტი და უფასოდ შეინახოთ იგი ონლაინში. ეს კოდის რედაქტორი განსხვავდება იმით, რომ მომხმარებლებს არ სჭირდებათ რაიმე პროგრამის დაყენება კომპიუტერზე. თითოეული სკრიპტის ინტერპრეტაციისას, რედაქტორი შესთავაზებს დამატებით მეტა დეტალებს, როგორიცაა ბრაუზერის ზარი ან პასუხის სათაურები.

11.JSLint

ეს თავისთავად ცოტა უცნაურია, ხოლო კოდის რედაქტორი მუშაობს სრულიად სტანდარტული სქემით.

შემოთავაზებულმა ვარიანტებმა შეიძლება გაგიკვირდეთ, თუ აქამდე არ შეგხვედრიათ ამ ტიპის შაბლონები. თუ თქვენ გაქვთ გარკვეული უნარების ნაკრები, შეგიძლიათ იმუშაოთ ღია კოდით. თუმცა, მრავალი წყაროს კოდი არც კი უჭერს მხარს სინტაქსის ხაზგასმას, რაც აშკარა გამოტოვებაა ასეთისთვის ფართო არჩევანიპარამეტრები. მე გირჩევთ სცადოთ, თუ გაქვთ თავისუფალი დრო, მაგრამ არ არსებობს გარანტია, რომ ის გახდება თქვენი საყვარელი ჯავასკრიპტის გამართვის ინსტრუმენტი.

12.SQL Fiddle

ცოტა ადრე ჩვენ შევხედეთ ვებ აპლიკაციას სახელწოდებით jsFiddle. ახლა დროა ვისაუბროთ , რომელიც მუშაობს იმავე მიმართულებით, გარდა SQL მონაცემთა ბაზის სინტაქსისა. მე მოვახერხე ღირსეული ალტერნატივის პოვნა მონაცემთა ბაზის კოდის შესამოწმებლად.

ყველა გამომავალი ინფორმაცია თქვენი SQL კოდიდან გამოჩნდება ცხრილში რედაქტორების ქვეშ. თქვენ შეგიძლიათ დაწეროთ ახალი კოდი, რომ გამოიყენოთ მონაცემები მარჯვნივ და გენერირება დიაგრამა მარცხნივ. მონაცემთა ბაზის ეს სქემა არის SQL კოდი, რომელიც შეგიძლიათ შეინახოთ თქვენი მიმდინარე მონაცემთა ბაზის ექსპორტისთვის და ხელახლა დააინსტალიროთ ყველაფერი ახალ სერვერზე.

თუ არ იცნობთ მონაცემთა ბაზებს ან SQL ენას, მაშინ ეს აპლიკაცია ნაკლებად სავარაუდოა, რომ თქვენთვის სასარგებლო იყოს. მაგრამ დეველოპერებისთვის, რომლებიც დაინტერესებულნი არიან გაეცნონ SQL-ს, ეს ინსტრუმენტი შესანიშნავია!

13.Cloud9 IDE

ჩემი აზრით, ეს არის საუკეთესო წყაროს რედაქტორი, რომელიც ხელმისაწვდომია ინტერნეტში. ეს არ არის მხოლოდ რედაქტორი, არამედ ინსტრუმენტებისა და რესურსების მთელი სისტემა; მათ სერვერებზე შეგიძლიათ შეინახოთ ყველა თქვენი წყარო კოდის საცავი.

რეგისტრაცია უფასოა ყველა სათემო პროექტზე. თუ თქვენ გჭირდებათ პერსონალური სივრცე განვითარებამდე, ის ეღირება $15 თვეში ან $180 წელიწადში. შეგიძლიათ პირადი კოდის საცავი გაუზიაროთ ნებისმიერს, ვისაც აირჩევთ. ეს ვარიანტი დეველოპერებს საშუალებას აძლევს ითანამშრომლონ სხვადასხვა პროექტებზე.

ყოველი ახალი პროექტი ინახება ქვესაქაღალდეში, სადაც შესაძლებელია რეალური ფიზიკური ფაილების შექმნა. HTMl, CSS, JS, PHP და ყველაფერი რაც გჭირდებათ კოდირებისთვის იქნება თქვენს ანგარიშში. დროთა განმავლობაში, თქვენ შეძლებთ ამ ფაილების გაგზავნას მთლიანი პროექტის სახით ან გადმოწეროთ თქვენს კომპიუტერში.

შესაძლებლობების სპექტრი, რომელსაც Cloud9 გთავაზობთ, ძალიან ფართოა. გირჩევთ 10-15 წუთის განმავლობაში იყუროთ უფასო ანგარიშში და მაშინვე შეგიყვარდებათ როგორ მუშაობს UI. კომპანია აგრძელებს ზრდას, ამიტომ ვიმედოვნებ, რომ დავამატებ ახალ სასარგებლო ფუნქციებს მომდევნო რამდენიმე წლის განმავლობაში.

14.CodeRun

– ონლაინ რედაქტორი ნებისმიერი დინამიური ვებ აპლიკაციისთვის. Ტექსტის რედაქტორიძალიან ჰგავს Microsoft Visual Studio-ს; შეგიძლიათ C#-ში კოდირებაც კი ASP.NET-ისთვის. მათი ბიბლიოთეკები მოიცავს მესამე მხარის რესურსებს, როგორიცაა Facebook Connect და Silverlight.

Microsoft-ზე დაფუძნებული ვებ აპლიკაციების გარდა, შეგიძლიათ კოდირება პირდაპირ javascript-ში ან PHP-ში. CodeRun-ის მუშაობა დიდად არ განსხვავდება Visual Studio-სგან: შექმენით ახალი ვებ-გვერდის პროექტი და იმუშავეთ ცალკეულ ფაილებზე. ეკრანის ბოლოში არის გამართვის ხელსაწყოები და შედეგები კონსოლის ფანჯრიდან.

შეუცვლელია თუ გაქვთ Visual Studio-ს გამოცდილება. ინტერფეისი თითქმის იგივეა და თქვენ შეგიძლიათ ჩამოტვირთოთ/ატვირთოთ პროექტის ფაილები თქვენს კომპიუტერში. ეს არის კიდევ ერთი ინსტრუმენტი, რომელიც გამოცდილ ვებ დეველოპერებს შეუძლიათ გაითვალისწინონ.

15.შემდგენელი

თარგი ძალიან ჰგავს შაბლონს Windows აპლიკაციები. შეგიძლიათ მუშაობა ღია დოკუმენტებიდა დაარედაქტირეთ ფაილები გადაადგილებისას. თუმცა, სანამ დაიწყებთ ახალი პროექტების შექმნას, უნდა დარეგისტრირდეთ.

ვინაიდან გვერდის განლაგება ჰგავს ჩვეულებრივ დესკტოპის აპლიკაციას, დამწყებთათვისაც კი ადვილია მასთან მუშაობა. ინსტრუმენტები მხარს უჭერს პროგრამირების ტექნიკას, როგორიცაა C++, C# და Visual Basic. მთლიანობაში, Compilr უნდა იყოს სარეზერვო პროგრამა წყაროს კოდის შესამოწმებლად და გამართვისთვის.

ბოლოს და ბოლოს

ერთმანეთთან დაკავშირებული კომპიუტერების რაოდენობა იზრდება, რაც აადვილებს დეველოპერებს ბრაუზერში ერთად მუშაობას. ახალი ტექნოლოგიები ჩნდება ადგილობრივი აპლიკაციების საშუალებით და ვინ იცის, რამდენად შორს წავა ეს.

ვიმედოვნებ, რომ ამ სტატიაში მოცემული კოდის ტესტირების ხელსაწყოების კოლექციამ დაგაფიქრა თანამედროვე განვითარების სივრცეზე. დღესდღეობით, არაფერი ღირს HTML/CSS ვებ-პროექტის რამდენიმე წუთში დაკავშირება და მცირე დემო ვიდეოს მიღება. გთხოვთ, გაითვალისწინოთ, რომ ეს ხელსაწყოები გამიზნულია მხოლოდ იმისთვის, რომ დაგეხმაროთ საბოლოო პროდუქტის შექმნის პროცესში.

ჩეკები html კოდი, ან მითითებულია გვერდის ბმულით, ან უბრალოდ ატვირთული ფაილის ან დაკოპირებული ტექსტის სახით. იძლევა კომენტარების ჩამონათვალს მათი გამოსწორების რეკომენდაციებით.
http://validator.w3.org/

CSS ვალიდაცია (css validator)

ამოწმებს დოკუმენტის სტილებს ან ცალკე ფაილში მდებარე სტილის ფურცელს.
http://jigsaw.w3.org/css-validator/

RSS და Atom არხების შემოწმება

ამოწმებს, რომ RSS და Atom არხები სწორად მუშაობს.
http://validator.w3.org/feed/

შეამოწმეთ მართლწერა ვებ გვერდზე

ხაზს უსვამს შეცდომებს მოცემულ URL გვერდზე.
http://webmaster.yandex.ru/spellcheck.xml

აჩვენებს შეცდომებს გადამოწმების ფანჯარაში კოპირებულ ტექსტში.
http://api.yandex.ru/speller/

ვებ გვერდის სტრუქტურის შემოწმება

აჩვენებს ვებ გვერდის სტრუქტურას. შესაბამისია HTML5 დოკუმენტების შესამოწმებლად. კირიული ანბანი სწორად არ არის ნაჩვენები (:.
http://gsnedders.html5.org/outliner/

კონტენტის შემოწმება უნიკალურობისთვის

IN უფასო ვერსიააჩვენებს 10-მდე გვერდს ინტერნეტში, ტექსტის ნაწილობრივი თანხვედრით თქვენს გვერდზე.
http://www.copyscape.com

ამოწმებს ფორმაში შეტანილი ტექსტის უნიკალურობას. უფასო ვერსიაში შეგიძლიათ დაელოდოთ შედეგებს.
http://www.miratools.ru/Promo.aspx

ამოწმებს როგორც შეყვანილი ტექსტის, ასევე ტექსტის უნიკალურობას მოცემულ URL-ზე, აჩვენებს უნიკალურობის დონეს პროცენტულად. აქვს საკუთარი გადამოწმების ალგორითმი.
http://content-watch.ru

დესკტოპის პროგრამები საავტორო გადაწერის გაცვლიდან შინაარსის უნიკალურობის შესამოწმებლად. ისინი მუშაობენ დიდი ხნის განმავლობაში, მაგრამ მაღალი ხარისხით. Etxt-ს აქვს ვერსიები სამისთვის ოპერატიული სისტემა: Mac, Linux და Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/

აჩვენებს საიტებს მსგავსი შინაარსით და მსგავსი შიდა სტრუქტურით.
http://similarsites.com

საიტის cms-ის შემოწმება

ამოწმებს ყველაზე ცნობილი სმს ნიშნებს.
http://2ip.ru/cms/

საიტის გამოყენებადობის შემოწმება მომხმარებელთა სხვადასხვა ჯგუფისთვის. ხელმისაწვდომობის შემოწმება მობილური მოწყობილობები

აფასებს გვერდის ნახვის შესაძლებლობას მობილური მოწყობილობებიდან და აჩვენებს კომენტარებისა და შეცდომების სიას.
http://validator.w3.org/mobile/

საიტის გამოყენებადობის შემოწმება Google ტელეფონებისთვის.
https://www.google.com/webmasters/tools/mobile-friendly/

აჩვენებს საიტის ჩატვირთვის სიჩქარეს მობილურ მოწყობილობებზე.
https://testmysite.withgoogle.com/intl/ru-ru

ემულატორის საიტიდან გასვლა მობილური ტელეფონი. აჩვენებს საიტს შერჩეული მოდელის თვალით.
http://www.mobilephoneemulator.com/

შეზღუდული შესაძლებლობის მქონე პირთათვის ხელმისაწვდომობის შემოწმება

გვერდის გადამოწმების სერვისი მხედველობის დაქვეითებისთვის. ხელმისაწვდომია ონლაინ და როგორც მოდული Firefox-ისთვის.
http://wave.webaim.org/

საიტის შინაარსის ნახვა საძიებო რობოტის თვალით

აჩვენებს საიტის ტექსტს ახლოს, რასაც ხედავს საძიებო ინდექსატორი.
http://www.seo-browser.com/

Lynx ტექსტური ბრაუზერის განაწილება win32 სისტემებისთვის. გამოყენებამდე, თქვენ უნდა შეცვალოთ lynx.bat, მასში მიუთითოთ ფოცხვის დირექტორიაში მიმავალი გზა.
http://www.fdisk.com/doslynx/lynxport.htm

შლის ყველა მარკირებას და აჩვენებს გვერდის ტექსტს, მეტა ტეგებს და სათაურის ტეგებს, გარე და შიდა ბმულების რაოდენობას. აჩვენებს გვერდის გადახედვას Google-ში.
http://www.browseo.net

საიტის ბმულების სტრუქტურის შემოწმება გატეხილი ბმულების შემოწმება

აჩვენებს URL-ის გამავალი ბმულების სიას და ამოწმებს მათ რეაგირებას. მას შეუძლია რეკურსიულად შემოწმება, ანუ ერთი დოკუმენტიდან მეორეზე დამოუკიდებლად გადატანა.
http://validator.w3.org/checklink

უფასო ინსტრუმენტი გატეხილი ბმულების შესამოწმებლად. სამუშაოდ, თქვენ უნდა დააინსტალიროთ იგი თქვენს კომპიუტერში. რეკურსიულად ასკანირებს საიტს, აკეთებს ანგარიშებს, შეიძლება სასარგებლო იყოს საიტის რუქის შესაქმნელად.
http://home.snafu.de/tilman/xenulink.html

ბმულების და გვერდების სათაურის შემოწმება

სკანირებს 500-მდე ვებ გვერდს უფასო ვერსიაში. ამოწმებს გარე და შიდა ბმულების რაოდენობას. აჩვენებს ინფორმაციას დასკანერებული გვერდების შესახებ: ბუდე, პასუხების კოდები, სათაურები, მეტა ინფორმაცია და სათაურები.
http://www.screamingfrog.co.uk/seo-spider/

შიდა გვერდების ბმულის სტრუქტურისა და წონის შემოწმება

პროგრამა ასკანირებს საიტს, აშენებს შიდა ბმულების მატრიცას, ამატებს გარე (შემომავალ) ბმულებს მოცემული URL-ებიდან და ამ მონაცემების საფუძველზე ითვლის საიტის გვერდების შიდა წონას. პროგრამა შეიძლება გამოყენებულ იქნას გარე (გამავალი) ბმულების მოსაძებნად ვებ გვერდის URL-ების სიისთვის.

სერვერის პასუხების კოდების შემოწმება, საიტის ხილვადობა საძიებო რობოტების მიერ, ტექნიკური მახასიათებლებისაიტი HTTP სათაურების და სერვერის პასუხის შემოწმება, გვერდის ხილვადობა რობოტებისთვის

ამოწმებს სერვერის პასუხების კოდებს, პროგნოზირებს გვერდის ჩატვირთვის სიჩქარეს მისი მონაცემების ბაიტებში მოცულობის მიხედვით, აჩვენებს html head tag-ის შინაარსს, შიდა და გარე ბმულებიგვერდისთვის, გვერდის შინაარსი საძიებო რობოტის თვალით.
http://urivalet.com/

ამოწმებს სერვერის პასუხების კოდებს. შესაძლებელს ხდის გადამისამართებების შემოწმებას (პასუხის კოდები 301, 302), ბოლო შეცვლილი სათაური და ა.შ.
http://www.rexswain.com/httpview.html

აჩვენებს გვერდის ჩატვირთვისას გადაცემული მონაცემების მოცულობას და შინაარსს.
http://www.websiteoptimization.com/services/analyze/

ამოწმებს გადამისამართებებს, კანონიკური ატრიბუტის გამოყენებას, მეტატეგებს და საიტის უსაფრთხოების ზოგიერთ ასპექტს. იძლევა რეკომენდაციებს გვერდის დატვირთვის გასაუმჯობესებლად.
http://www.seositecheckup.com

დომენისა და IP მისამართის ინფორმაციის შემოწმება

RU ცენტრის დომენის რეგისტრაციის ცენტრის WHOIS სერვისი. გთავაზობთ ინფორმაციას IP მისამართებისა და დომენების შესახებ მთელს მსოფლიოში. ზოგჯერ იყინება.
https://www.nic.ru/whois/?wi=1

Whois სერვისი RosNIIROS-ისგან (RIPN). აწვდის ინფორმაციას RU ზონაში დომენებზე და IP მისამართებს RIPE მონაცემთა ბაზიდან (ევროპა).
http://www.ripn.net:8080/nic/whois/

განსაზღვრავს სად არის დომენი ჰოსტირებული და ასევე აჩვენებს საიტის IP მისამართს.
http://www.whoishostingthis.com

იმის შემოწმება, შედის თუ არა IP მისამართი ელფოსტის გაგზავნის შავ სიაში.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/

დომენისთვის MX ჩანაწერების შემოწმება. SMTP სერვერის შემოწმება დომენისთვის. IP-ის შემოწმება საფოსტო სიებში.
https://mxtoolbox.com/

მოძებნეთ რეგისტრირებული სავაჭრო ნიშნების მონაცემთა ბაზა აშშ-ში.
http://tmsearch.uspto.gov/

robots.txt ფაილების შემოწმება

ამოწმებს საიტის გვერდების ხელმისაწვდომობას Yandex რობოტის მიერ ინდექსაციისთვის.
http://webmaster.yandex.ru/robots.xml

ამოწმებს robots.txt ფაილის სისწორეს.
https://www.websiteplanet.com/webtools/robots-txt

Ადგილის შემოწმება

საიტის ხელმისაწვდომობის მონიტორინგი. საშუალებას გაძლევთ უფასოდ დააკავშიროთ ერთი ვებსაიტი მინიმალური გადამოწმების ვარიანტებით.
http://www.siteuptime.com

საიტის ჩატვირთვის სიჩქარის შემოწმება. აგზავნის ანგარიშს ელექტრონული ფოსტით. მას აქვს ფასიანი სერვისები საიტის ხელმისაწვდომობის მონიტორინგისთვის.
http://webo.in

ვებგვერდის გვერდების ჩატვირთვის სიჩქარის შემოწმება.
http://www.iwebtool.com/speed_test

საძიებო სისტემების მიერ საიტის ინდექსირებისა და ჩვენების შემოწმება საძიებო სისტემებში საიტის ხილვადობა

სერვისის ჩვენება საკვანძო სიტყვებისაიტისთვის, რომლისთვისაც ის დროთა განმავლობაში Google-ის ტოპ 20 (ტოპ ოცი) შედეგებშია. მონაცემები საძიებო და სარეკლამო ტრაფიკის შესახებ.
http://www.semrush.com/

პოზიცია TOP50 Yandex-სა და Google-ში. საიტის ძუძუები და PR მთავარი გვერდი, ყოფნა მნიშვნელოვან დირექტორიაში, ხილვადობა ზედა RF მოთხოვნებისთვის.
http://pr-cy.ru/

აკრძალვების და საიტის ნდობის დონის შემოწმება

საიტის სანდოობის შემოწმება. სერვისი, რომელიც ირწმუნება, რომ ზომავს Yandex-ის ნდობას (მას მაინც ვერავინ შეამოწმებს :).
http://xtool.ru/

Google-ისგან პანდასა და პინგვინის ფილტრების გადაფარვის შემოწმება. სერვისი საშუალებას გაძლევთ ვიზუალურად დაადგინოთ, მოხდა თუ არა საიტი ავარიული პანდასა და პინგვინის განახლების თარიღებზე.
http://feinternational.com/website-penalty-indicator/

საიტის გვერდების გვერდის რანგის შემოწმება (ინსტრუმენტში URL-ის კოპირებისას, თქვენ უნდა წაშალოთ ბოლო ასო და შემდეგ ისევ დაწეროთ).
http://www.prchecker.net/

საიტის განვითარების ისტორიის შემოწმება

აჩვენებს საიტის განვითარების ისტორიას და შესაძლებელს ხდის ძველი გვერდების სკრინშოტების ნახვას.
http://www.archive.org/web/web.php

საიტის პოზიციების ისტორია TOP Google-ში (საკვანძო ფრაზები, გვერდები, სათაურები), PR ინდიკატორები, TIC, Alexa Rank, პოპულარული საიტებისთვის ბმულების რაოდენობა.
http://SavedHistory.com

SEO დანამატები საიტების შესამოწმებლად

SEO Doctor არის დამატება Firefox-ისთვის. აჩვენებს ბმულებს გვერდზე და უზრუნველყოფს მოსახერხებელ ინტერფეისს სხვადასხვა SEO სერვისებისთვის.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake არის დამატება Firefox-ისთვის. აჩვენებს საიტის ყველაზე მნიშვნელოვან მახასიათებლებს: TIC, PR, backlinks, Alexa Rank. მუშაობს როგორც Google-ის, ასევე Yandex-ის შედეგებთან. უზრუნველყოფს კონკურენტების სწრაფად გაანალიზების უნარს.
http://www.seoquake.com/

IEContextHTML - დამატება Internet Explorer. ამოწმებს ბმულების ინდექსირებას Yandex-სა და Google-ში, აჩვენებს გარე და შიდა ბმულების ჩამონათვალს და საშუალებას გაძლევთ შეიტანოთ მონაცემები ვებ გვერდებიდან.

საძიებო სისტემებში საიტის ხილვადობა დამოკიდებულია მის მდებარეობაზე

უფასო პროქსი სერვერების განახლებული სია, მათ შორის რუსული.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/

ანონიმური უფასო პროქსი, რომელსაც შეუძლია საკუთარი თავის წარდგენა სამი ქვეყნიდან. მუშაობს Google ძიებით.
https://hide.me/en/proxy

ემულატორები Google ძებნასხვადასხვა ქვეყანაში ძიების პარამეტრების მითითებით.
http://searchlatte.com/
http://isearchfrom.com/

პოზიციების შემოწმება Yandex-სა და Google-ში

სერვისი იძლევა საიტის პოზიციის ღრმა შემოწმებას (500-მდე) Yandex-ში რეგიონების მიხედვით.

საიტის ქსელური ანალიზი, ბექლინკების შემოწმება ბექლინკების ანალიზი

ახორციელებს ანალიზს საცნობარო მასასაიტი, აყალიბებს ნაჭრებს სხვადასხვა კრიტერიუმების მიხედვით: ბმულის ტიპი, წამყვანები, გვერდები. აჩვენებს ბექლინკების წონას. სერვისი ხელმისაწვდომია მხოლოდ დარეგისტრირებულ მომხმარებლებს.
http://ahrefs.com

საიტის ბმულების შემოწმება

ამოწმებს საიტის ბმულების არსებობას URL-ების შემოთავაზებულ სიაში (100 გვერდამდე).
http://webmasters.ru/tools/tracker

ვებსაიტის პოპულარობის შემოწმება სოციალურ მედიაში PlusOneChecker

აჩვენებს მოწონებების რაოდენობას (plusone) Google+-ზე. შეგიძლიათ დაუყოვნებლივ შეიყვანოთ შესამოწმებელი URL-ების სია.
http://www.plusonechecker.net/

Facebook Graph API Explorer SharedCount

აჩვენებს პოპულარობას Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com

მაგარი სოციალური

აჩვენებს საიტის პირველი გვერდის პოპულარობას Twitter, Google+, Facebook, Delicious, StumbleUpon. რუსული საიტებისთვის მონაცემები ზოგჯერ არასწორია.
http://www.coolsocial.net

სოციალური პოპულარობა Social Crawlytics

სკანირებს საიტს და აგენერირებს ანგარიშებს "გაზიარებებს" მთავარი უცხოური სოციალური ქსელებიამ გვერდებისთვის. რეგისტრირებს მომხმარებლებს Twitter ანგარიშის მეშვეობით. თქვენ შეგიძლიათ ნახოთ ანგარიშები მეორე დღეს.
https://socialcrawlytics.com

საიტის შემოწმება Dr.Web ვირუსებზე

ამოწმებს მოცემულ URL-ს საეჭვო კოდისთვის, აჩვენებს ჩატვირთულ სკრიპტებს და მათი შემოწმების შედეგებს.
http://vms.drweb.com/online/

ვირუსი სულ

ამოწმებს URL-ებს ვირუსებზე 30 სკანერით.
https://www.virustotal.com/#url

სიგნალიზაცია

საიტის დაცვის სისტემა ვირუსებისგან. ყოველდღიურად სკანირებს საიტის ფაილებს და აგზავნის ანგარიშს მათი ცვლილებების შესახებ ელექტრონული ფოსტით.



რაც არ უნდა უცნაურად მოგეჩვენოთ, მაინც არიან მომხმარებლები, რომლებიც გამორბენ JavaScript-ს. და ვებმასტერების უმეტესობა უბრალოდ უგულებელყოფს მათ, თუმცა, ზოგჯერ გსურთ რჩევის მიცემა, რათა მომხმარებელმა ჩართოს JavaScript. და აი, როგორ შევამოწმოთ: „ჩართულია JavaScript?“ და თუ არა, მაშინ აჩვენეთ ხაზი, რომელიც ითხოვს მის ჩართვას, გეტყვით ამ სტატიაში.

ქვემოთ მოყვანილი კოდი უნდა განთავსდეს სხეულის ტეგის შიგნით:

document.write ("თქვენ გაქვთ JavaScript ჩართული!");

თქვენ გამორთული გაქვთ JavaScript...

ნება მომეცით ავხსნა ეს კოდი ცოტათი. თუ მომხმარებელს ჩართული აქვს JavaScript, write() მეთოდი იმუშავებს და დაბეჭდავს სტრიქონს. თუ JavaScript გამორთულია, მაშინ მთელი სკრიპტის ტეგი იგნორირებული იქნება. თუმცა, შემდეგი მოდის noscript ტეგი. ეს ტეგი შეიცავს ელემენტებს, რომლებიც ნაჩვენები იქნება ბრაუზერის მიერ, თუ JavaScript გამორთულია. ანუ, ნოსკრიპტის ტეგის შიგთავსი ნაჩვენებია, როდესაც JavaScript გამორთულია, მაგრამ როდესაც ჩართულია, მომხმარებელი ვერ ხედავს ნოსკრიპტს.

ვებმასტერები ხშირად წერენ ამ მარტივი გზით: " გთხოვთ ჩართოთ JavaScript", ან აჩვენე ზოგიერთი ლამაზი სურათებიმსგავსი მოთხოვნით, ან სხვა რამით, რადგან noscript ტეგის შიგნით შეგიძლიათ მოათავსოთ ნებისმიერი HTML ტეგი. ახლა კი შეძენილი ცოდნის გამოყენება შეგიძლიათ თქვენს ვებგვერდზე, რადგან საიდუმლო არ არის, რომ ახლა არც ისე ადვილია ისეთი ვებსაიტის პოვნა, რომელიც საერთოდ არ იყენებს JavaScript-ს.