Thăm dò kiểm tra và sửa lỗi Css - Jquery - Php khi cắt html và lập trình php

Trong quá trình cắt html, lập trình php không thể tránh khỏi các lỗi css, jquery, php phát sinh, việc thăm dò html, kiểm tra lỗi css, sửa lỗi php là một kỹ năng không thể thiếu.
  • 22:07 16/09/2016
  • Kỳ Nhân
  • 0 Bình luận
  • 1527

Vậy thăm dò html, kiểm tra lỗi css, sửa lỗi php bằng cách nào?

Phần này mình hướng dẫn các bạn thăm dò bằng plugins có sẵn của trình duyệt chrome.là Developer Tools

Để mở công cụ này các bạn mở trang web bằng trình duyệt chrome, nhấn F12 hoặc chuột phải > kiểm tra. Và dưới là hình của em nó.

Thăm dò kiểm tra lỗi

Vậy sử dụng nó như thế nào? Như hình trên những phần mình gạch đỏ là các phần sử dụng nhiều cho việc thăm dò sửa lỗi.

Phần Elements là phần hiển thị giao diện html của trang mà bạn cần thăm dò

Phần console là phần hiển thị các thông báo dạng log trong Jquery, Ví dụ: trong file home.js chèn vào website viết 1 đoạn mã: console.log(‘Thông báo console’); như vậy phần console khi chạy trang web mà bạn thăm đò được sẽ có đoạn text Thông báo console.

Phần Network chủ yếu dùng để thăm dò Ajax trong jquery, hoặc các load trang ngầm.

Phần Style là hiển thị Css của khu vực Elements mà bạn chọn. Ví dụ khi bạn thăm dò phần text Chia sẽ kinh nghiệm thiết kế web trên trang của mình. Như hình dưới

Thăm dò kiểm tra lỗi

Css của nó sẽ nằm tại file style.css dòng 206 với các style như hình trên, các bạn có thể kéo chuột phần bên phải để thấy các css tác động lên phần tử mà bạn thăm dò, những dòng nào mà ngạch giữa là css không được sử dụng, còn không gạch là css đó đang áp dụng lên phần tử mà bạn cần thăm dò.

Vậy còn những thành phần phải hover, click vào mới hiện css thì thăm dò thế nào? Ví dụ: Bạn để chuột vào khung tối ưu hóa cho web chuẩn seo nhấn chuột phải -> kiểm tra -> chọn phần tử là div class=’item-style1 mb10’ sẽ thấy như hình bên dưới

Thăm dò kiểm tra lỗi

Như hình trên các bạn sẽ thấy được phần tử class là item-style1 được viết css tại file module.css và dòng 400, khi hover vào thì sẽ chạy css dòng 411. Các chức năng như :active, :focus, :visited các bạn thăm dò như :hover

Về active, focus, visited, hover như thế nào? Phần này là phần cơ bản về css các bạn có thể tự tìm hiểu nha.

Như vậy với phần thăm dò css, các bạn có thể biết được css nào đang tác động lên phần tử đó và đang ở file nào? Dòng nào? Việc còn lại là mở file đó lên và sửa cho giống ý mình.

Các bạn có thể thăm dò các div khác như class img để hiểu thêm.

Việc thăm dò lỗi Jquery, Ajax, code php khó hơn tý các bạn hiểu thì không cần down bài test về còn không có thể down thư mục test về tại Đây

Sơ đồ folder khi bạn down về:

+images
+js
---- jquery-1.11.0.min.js
---- home.js
+css
---- style.css
+extra
---- + bootstrap
------------------------ các thư viện của bootstrap thôi
index.php

Bây giờ bạn chạy dự án check tại localhost. Nếu bạn chưa biết có thể tìm hiểu tại link Hướng dẫn cài đặt Wampserver và nhập môn lập trình php

Đầu tiên mở file home.js gõ vào dòng lệnh

$(document).ready(function() {
    console.log('test jquery');
});

Khi chạy web tại đường link localhost/check, F12 thăm dò, qua phần console sẽ thấy dòng chữ test jquery. Như vậy các bạn đã biết chút ít rồi.

Giờ chú thích dòng trên và viết dòng code tiếp nào

$(document).ready(function() {
    //console.log('test jquery');
    for(i=1;i<=5;i++) {
        console.log('Thông báo '+i);
    }
});

F5 refesh trang web, thăm dò phần console

Thăm dò kiểm tra lỗi

Giờ thử viết code lỗi cái nào, cũng dòng code trên chú thích lại và thêm 1 ký tự khác như:

$(document).ready(function() {
    //console.log('test jquery');
    for(i=1;i<=5;i++) {
        console.log('Thông báo '+i);
    }
    for(i=1;i<=5;i++) {
        console.log1('Thông báo '+i);
    }
});

F5 refesh trang và phần xem kết quả nào.

Thăm dò kiểm tra lỗi

Và khi click vào

Thăm dò kiểm tra lỗi

Như vậy phần thăm dò, sữa lỗi jquery đã trở nên đơn giản hơn nhiều

Còn thăm dò network thì sao? Phần này chủ yếu mình thăm dò Ajax, vì có liên quan với php nên mình nói phần sửa lỗi php trước nha. Các bạn có thể đọc từ từ vì khi biết rõ sữa lỗi code php sẽ dễ hơn

Vậy phải làm sao đễ thăm dò lỗi php? Một số bạn có kinh nghiệm ít toàn mở file, đọc từ trên xuống dưới, chăm chú, căng mắt, hại não, soi và soi để kiếm lỗi, điều này khi 1 người đã đọc bài viết này nhìn vào chắc sẽ nhìn bạn như 1 con gà con của lập trình ^^. Vì nếu file ít dòng code có thể các bạn tìm ra, còn những trang mà có vài ngàn dòng thì chắc đọc có mà chết sớm.

Các hàm cần lưu ý:

Hàm die(); -> hàm này khi code chạy tới đó sẽ ngưng lại không chạy tiếp nữa, giúp các bạn phân ngắt dòng test code dễ hơn.

Hàm print_r($array) Hàm này dùng để in ra các mảng trong lập trình, giúp nhìn được mảng có giá trị hay không, mảng như thế nào để fetch dữ liệu, các bạn có thể tìm hiểu thêm. Trong bài viết này mình không nói tới hàm này, nhưng đây là hàm sử dụng nhiều khi sửa lỗi.

Giờ chú thích code lỗi của file home.js lại rồi làm phần php nào. Mở file index.php viết vào

<?php 
    echo "phan mo dau"; 
    for($i=0;$i<=2;$i++) {
        echo "thong bao $i";
    }
    echo "phan cuoi trang";
?>

F5 refesh trang thấy

phan mo dau
thong bao 0
thong bao 1
thong bao 2
thong bao 3
phan cuoi trang

vậy phát sinh lỗi thì sao nào? Thử cái nha,

Bạn dán thêm 1 đoạn code này vào dưới vòng for nào

for($i=0;$i<=2;;$i++) {
    echo "thong bao loi choi $i ";
}

F5 refesh trang thấy

Thăm dò kiểm tra lỗi

Đấy, đây là file đơn giản nên nó báo cho bạn biết lỗi dư dấu ; tại dòng 25. Nhưng có 1 số lỗi nó không thông báo vậy phải làm sao? Khi đó bạn áp dụng hàm die() vào.

Ví dụ trang index.php chia ra các phần head, menu, slide, content, footer

<?php Include('head.php'); ?>
<?php  Include('menu.php');?>
<?php  Include('slide.php');?>
<?php  Include('content.php');?>
<?php  Include('footer.php');?>

Nếu lỗi phát sinh mà php không thông báo, bạn cần copy hàm die vào từng phần
Trước tiên bạn cần dán vào trước hàm include (header) rồi refesh trang.
Nếu web chạy dc là những hàm trước hàm die hoàn toàn ok, kết tiếp xóa rồi dán hàm die dưới hàm include head rồi f5 refesh trang nếu chạy được là khúc đó ko lỗi, còn chạy ko được là khúc đó lỗi,
-Làm tương tự các phần còn lại tới khi tìm ra chỗ lỗi. => xác đinh khu vực lỗi ít lại rồi đọc code sữa thôi. Phần này các bạn cần chú ý, vì 1 số bộ source hay host có chặn thông báo lỗi nên mình không thấy được báo lỗi, cần thăm dò từng bước giống vậy.

Về phần thăm dò sửa lỗi Ajax như thế nào ?

Tại file home.js thêm đoạn code Ajax

$(document).ready(function() {
    // console.log('test jquery');
    // for(i=1;i<=5;i++) {
        // console.log('Thông báo '+i);
    // }
    // for(i=1;i<=5;i++) {
        // console.log1('Thông báo '+i);
    // }
    $('h1').on('click',function() {
        $.ajax({
            method: "POST",
            url: "ajax.php",
            data:{'do':'get_h1'},
            success: function(html){
                $('h1').html(html)
            }
        });        
    });
});

Đoạn này nghĩa là khi h1 được click đẩy biến do=get_h1 bằng POST qua file ajax.php. và tại file ajax.php sẽ dựa vào biến do, thực hiện lệnh, trả về kết quả, khi kết quả trả về thì truy cập vào h1 đổi nội dung bằng nội dung trả về là xong.

Vậy thăm dò bằng cách nào? Mở công cụ thăm dò lên (f12), nhấn qua phần Network, sau đó click vào H1 các bạn sẽ thấy như hình dưới

Thăm dò kiểm tra lỗi

Khi click vào

Thăm dò kiểm tra lỗi

Qua bài viết này hi vọng trang bị cho các bạn thêm hiểu biết và thông thạo khi cắt html, code php.