Дебаг (відладка) коду фронтенду

Помилки не приносять жодної користі, якщо їх не виправляти і не робити висновків. Тут будемо вчитись відшукувати найпростіші неполадки.

Оскільки матеріал доповнюється Вашими коментарями-питаннями, варто зауважити, що питання бувають двох типів:

  • у мене нічого не працює!!!
  • у мене не виводить такий-то блок (вказуємо назву-селектор), розповзається верстка, видає помилку тощо.

Як ви напевне зрозуміли перше питання — це класичний приклад неправильного. Друге — дає шанс на вирішення. Аби збільшити шанси, конкретизуйте питання:

  1. вкажіть, після якого моменту помітили неполадку;
  2. що саме пробували для її усунення;
  3. з якого девайсу дивитесь (це буває важливим, коли мова йде про фронтенд).

Косяки — неминуча реальність в житті будь-якого девелопера, але на них варто вчитись, а не лякатись 🙂

14 коментарів для “Дебаг (відладка) коду фронтенду”

  1. Вичитала в просторах нету, що для коректного відображення в усіх браузерах необхідно прописати reset.css, або просто вкласти у файл css “обнулення”. Так й зробила. Наступний крок – вигляд body{. Тут все було більш менш зрозуміло й цікаво – я писала коментарі у файлі css, пробувала різні властивості. Наступні класи (лого й т.д.) – теж більш -менш якось зрозуміло було. “Не получатися” почалося із етапу, коли після header я намагалася причепити блоки, які будуть flexible щодо параметрів екрану – ну принаймі урок з codecadamy гарно це показував. В мене чомусь блоки не утворювалися – col-sm-4, col-sm-6 – мали розтягуватися на блоки. А от jumbotron нормально працює. Значить я щось не врахувала й не написала, але от що?…
    Ось картинка, як мало діяти:

    В цілях експерименту знайшла також таку штуку як .three-columns .content-sidebar-wrap, .three-columns #primary, #secondary які теоретично теж мали б розділити площину на 3 колонки – а в мене щось все суцільним текстом йде…крім того не відображається footer взагалі.

    jumbotron

  2. Ну й в загальних рисах – не можу зробити вужчим header, якось то красиво посунути все, бо рухаю щось одне – валиться все.
    #main:after, .wrapper:after, #header-menu:after, .hentry:after, .widget:after, #access-footer:after, #footer-menu:after {

    content: “\0030”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    Оцей блок мені взагалі чудеса витворяє.

    1. ну, під цією властивістю прописані через кому декілька елементів — можливо однією причин, що при правці одного валиться інше є те, що в них аналогічні спільні властивості.

      Відводьте редагований елемент з когорти. Наприклад, якщо мені потрібно з цього переліку змінити лише один блок (збільшити висоту), я б задав після закриваючої дужки окремі стилі для:

      .wrapper:after {
      height: 20px;
      }

  3. Кілька свіженьких проблемок, які не надаються самостійному вирішенню ((.
    1. Я “запозичила” один дизайн. В ході інспектування виявила, що є багато вкладених файлів із різним розширенням. Зокрема jquery, які відповідають за інтерактивність.
    Наразі не можу відцентрувати шапку, розтягнути малюнок на весь екран – показує, що частина все -таки прив”язана до іншого сss й тягнеться звідти. Поняття не маю, як це обійти – вже пробувала кілька раз й мені тоді повністю все злітає, коли пробувала просто заміняти лінки на наш сайт. Й ще – пробувала робити оті версії css 1 , 2 й т.д., але або я якийсь значок, кому, крапку пропустила, або щось не так зрозуміла – бо не відображалося коректно. Пропоную на наступному занятті це “вживу” показати – так буде найефективніше, ніж писати довго. герб – хотіла перетягнути в header у правий верхній кут – але через те, що частина тягнеться в Css чужого сайту – щось не вдається. Так не видно, а якщо відкривати через інспектування, то видно , що є й мій файл й чужий.
    2. чому частину властивостей описують в індексному файлі через ? Хіба від цього не збільшується” розмір ” сайту?…Чому властивості зразу не прописувати виключно в css, він хіба не для цього створений?…Хотіла ще давніше за це спитатися, а зараз наочно стикнулася. Й в такому випадку – що над чим має перевагу? індексні властивості, чи css?…
    3. <li id="…в індексному файлі – тре додавати через записи з вордпресу? чи сторінки Це динамічні, чи статичні дані будуть?..Бо я щось заплуталася.
    4. а ще, при наведенні мишки в інспект., видно , що біля мого мого style.css є двокрапка, а після того якісь весь час різні цифри, залежно що підсвічую.

    1. 1. Тань, “запозичати” дизайн краще перетягуючи поодинокі стилі конкретних блоків, а не підключаючи файли загалом. Просто Ви не застраховані від того, що автор сайту теж не запозичив усе це скопом. Відтак, ми матимемо купу зайвого коду, який не лише займатиме місце, але й створюватиме нові проблеми…

      Почати робити правильно ніколи не пізно, тому, якщо терміни дозволяють, рекомендую перенести видимі блоки по-одному, вносячи в .CSS тільки потрібні стилі.

    2. 2. Такий опис має місце або через недбалість, або, якщо стилі вносяться якимсь плагіном.

      Справа ще в тому, що стилі, записані в індексному файлі переоприділяють ті, що потрапляють з вкладеного документу (тобто мають вищий пріорітет). Таким чином розробники плагіну страхуються на випадок, якщо подібні стилі вже можуть бути прописаними в документі .CSS.

    3. Щодо 3 пункту твого: ти маєш створити блок, місце в шаблоні, де будуть виводитися новини чи наші записи. А туди ми поміщаємо код, який виводить наші записи з Вордпресу, а не самі ці записи. Ми так робили на наших власних сайтах. Якщо я невірно раджу, то хай Юрій поправить.
      Мені здається, треба барти з цього матеріалу – http://intech.lviv.ua/creating-theme-for-wordpress/ ,ось цей шматок коду:
      “Контент сайту виводиться за допомогою циклу. Вставляючи константи всередину цього циклу ми зможемо виводити потрібні для нас записи.

      Вставляємо всередину циклу блок тіла матеріалу. Як Ви вже здогадались константа the_ID() видає нам номер матеріалу:

      <article id="post-” >

      Має вийти щось подібне як на скріншоті:”

  4. До речі, давно хотіла спитати – про інтелектуальну власність, тобто дизайн, шаблон сайту – є автор, розробник, внизу часто пишуть Copyright by ….. Тобто, як це питання регулюються в даному випадку. Звісно, є межа між частковим запозиченням та повністю запозиченою темою, але якщо її адаптувати під власну потребу, то буде тяжко довести факт запозичення.
    І до цього ж, чому тоді html код та стилі є у відкритому доступі, тобто можна переглянути будову будь-якої веб-сторінки?

    1. Попри те, що більшість коду сайтів є доступними для запозичання, законодавчо це не дає підстав тягати чиюсь роботу.

      Попри те, автор нічого ще ні разу не чув про судові позови щодо вкраденого дизайну сайтів…

    2. в будь-якому разі не варто сліпо копіювати плоди чиїхось старань — Якщо вже щось беремо, то не лише переробляємо, але намагаємось зробити краще…

      інакше залишимось на рівні дрібних злодюжок 🙂

Залишити відповідь