Hướng Dẫn Firebug Để Debug Html Css Hiệu Quả

Thảo luận trong 'Mới sử dụng Joomla' bắt đầu bởi Hồ Bảo Nguyên, 11/7/13.

  1. Hồ Bảo Nguyên

    Hồ Bảo Nguyên Rất tâm huyết

    Bài viết:
    438
    Likes :
    264
    1. Giới thiệu
    Công cụ hỗ trợ hiệu quả khi làm việc HTML và CSS - hiệu chỉnh và xem trực tiếp.
    Theo mình khi làm việc với inspect element từ firebug tiện lợi hơn gủa Google, Safari, và debug IE
    Trong quá trình làm thì mình cảm thấy ưu tiên như sau:
    Thứ 1. Firebug của firefox (setup addon)​
    Thứ 2. Chrome có sẵn debug HTML, và CSS - Right click page sẽ thấy Inspect element hoặc là kiểm tra phần tử tiếng việt​
    Thứ 3. Safari->menu reference->Advance -> check box: Show develop in menu bar (check vào - right click page sẽ thấy inspecthtml)​
    Thứ 4: IE debug - tệ nhất.​
    Trong quá trình sử dụng thì lấy Firebug để làm, khi dự án hoàn thành tùy theo mỗi Browser bị lỗi mà sử dụng để debug riêng.
    2. Download và setup
    [​IMG]

    3. Giới thiệu Giao diện
    [​IMG]

    4. HTML debug bằng Firebug
    [​IMG]

    5. CSS debug bằng Firebug
    [​IMG]
    6. Lưu ý
    Sau khi debug bằng firebug tiến hành lưu trữ tại file HTML, PHP hoặc CSS (phù thuộc vào cách tổ chức website).
     
  2. TranHung

    TranHung Mới tham gia

    Bài viết:
    6
    Likes :
    2
    bai viet rat y nghia cho newbie. cam on anh rất nhiều
     
    Hồ Bảo Nguyên thích bài này.
  3. Tizovn

    Tizovn Mới tham gia

    Bài viết:
    11
    Likes :
    1
    bài hay lắm, mỗi tội mình không dùng firefox mà dùng chrome, cái chức năng kiểm tra phần tử của em nó cũng hay lắm, mình thấy không thua gì firebug :rolleyes:
     
    Hồ Bảo Nguyên thích bài này.
  4. duongthanhphongts

    duongthanhphongts Mới tham gia

    Bài viết:
    11
    Likes :
    0
    hay quá
     
  5. daiduong47

    daiduong47 Moderator Staff Member

    Bài viết:
    278
    Likes :
    95
    Vẫn thích dùng chrome hơn :D. Vì chrome không cần tích hợp add-ons mà vẫn chạy được :)
     
  6. chymbymbyp

    chymbymbyp Rất nhiệt tình

    Bài viết:
    328
    Likes :
    159
    chrome hay firefox đều có chức năng kiểm tra phần tử và xem vị trí file cần sửa ở chỗ nào. và có thể sửa trực tiếp để thấy sự thay đổi, nhưng thích chrome hơn vì nó hiện mã màu kèm màu bên cạnh luôn ^^
     
  7. quangtrung9890

    quangtrung9890 Mới tham gia

    Bài viết:
    7
    Likes :
    0
    Xem địa chỉ của phần HTML trong template như thế nào vậy bạn ? mình tìm mãi mà ko sửa được phần HTML
     
  8. tieulong042

    tieulong042 Rất nhiệt tình

    Bài viết:
    257
    Likes :
    44
    Mình cũng thích chrome hơn.
     
  9. quangtrung9890

    quangtrung9890 Mới tham gia

    Bài viết:
    7
    Likes :
    0
    ai biết chỉ giúp mình với, mình đang rất cần. mình dùng firebug rồi nhưng không xem được địa chỉ của HTML như CSS. mình đang muốn sửa phần HTML mà không biết nó ở chỗ nào để sửa .
     
  10. thanhca37

    thanhca37 Mới tham gia

    Bài viết:
    1
    Likes :
    0
    ai biết chỉ giúp mình với, mình đang rất cần. mình dùng firebug rồi nhưng không xem được địa chỉ của HTML như CSS. mình đang muốn sửa phần HTML mà không biết nó ở chỗ nào để sửa .
    ai chỉ giùm với
     
  11. tientm_bn

    tientm_bn kinhbactown.com

    Bài viết:
    12
    Likes :
    0
    hay
     
  12. thanh1

    thanh1 Rất tích cực

    Bài viết:
    107
    Likes :
    2
    Cho mình hỏi làm sao xác định được đường dẫn của file chứa đoạn code mình cần tìm ạ! :???
     
  13. Hồ Bảo Nguyên

    Hồ Bảo Nguyên Rất tâm huyết

    Bài viết:
    438
    Likes :
    264
    Chào bạn,
    Không thể xác định được code nằm ở file nào từ trình duyệt.
    Khi xuống trình duyệt đã được tạo thành HTML rồi.
    Muốn xác định được: bạn dùng kinh nghiệm, hiểu biết về joomla, extension sử dụng để dự đoán code nằm phạm vi nào.
     
    thanh1 thích bài này.
  14. vnptp9x

    vnptp9x Mới tham gia

    Bài viết:
    14
    Likes :
    2
    Có vẻ thằng chrome vẫn nhanh và hiệu quả nhỉ, trước giờ toàn bật chrome sài cho lẹ
     
  15. vinhkrongpak

    vinhkrongpak Mới tham gia

    Bài viết:
    18
    Likes :
    0
    với một người làm web thì ff luôn là vô địch , bài viết của bạn khá chi tiết và hay , thanks bạn nhiều
     
  16. thanh1

    thanh1 Rất tích cực

    Bài viết:
    107
    Likes :
    2
    Lúc trước mình có đọc ở đâu đó có cách xđ. @@. Vậy thì hơi khó cho mình. Mình không chuyên về code. oài. :((
     
  17. thanh1

    thanh1 Rất tích cực

    Bài viết:
    107
    Likes :
    2
    ĐÚng đó bạn. chrome vẫn là số 1. Việt Nam mình có làm cờ rôm, mà mình thấy giống như coppy của Chrome, thấy chẳng khác gì. Mà toàn quản cáo, nhanh đâu không thấy, thấy chậm và bị phiền toái. Vì lợi nhuận nhiều quá. @@
     
    TomyTran thích bài này.
  18. TomyTran

    TomyTran Marketing & Founder Staff Member

    Bài viết:
    1,073
    Likes :
    666
    Đôi khi tìm chính xác tên của mã cần tìm không ra, hãy vận dụng hiểu biết trong cuộc sống của bạn ... tư duy 1 chút ... là sẽ ra, vd khi bạn đi đón ai đó xuống xe bus ở điểm trên phố Lý Thường Kiệt (Hà Nội), cách nhanh nhất là bạn nên hỏi: "bạn đang đứng trước số nhà bao nhiêu???" trong trường hợp một số phố khó tìm theo thứ tự số nhà và lẫn với khu tập thể, đô thị mới thì bạn sẽ nên hỏi thêm: "quang bạn có tòa nhà hay địa điểm gì dễ thấy không???" câu trả lời tiếp theo sẽ rút ngắn công cuộc tìm kiếm của bạn: "Tớ đang đứng bên đường đối diện với khách sạn Meliá"

    Quay lại lĩnh vực này, mình dùng Chrome, view-source nó ra, tận dụng các thẻ HTML trước hoặc sau nó (mà nằm cùng cái bạn tìm vd liên quan đến slideshow) đặc trưng, duy nhất vd <div id="slideshow #378"> để tìm. Vậy thử dùng phần mềm tìm kiếm nội dung trong files & folder để tìm theo từ khóa: [ id="slideshow ] vì mã #378 kia chắc chắn là tự sinh code không cố định trong khi đó id="slideshow lại có vẻ unique nên dễ tìm hơn.

    Thử vài lần bạn sẽ thấy tư duy này rất tiện đấy.
     
comments powered by Disqus

Chia sẻ trang này