Video-based visualization of debugging process
One of the current trends in education is microlearning, which involves the use of short videos in the learning process. Microlearning has a number of advantages, including the fact that this approach is more student-centered, aims to increase the level of knowledge assimilation, requires less time...
Збережено в:
| Дата: | 2024 |
|---|---|
| Автори: | , |
| Формат: | Стаття |
| Мова: | English |
| Опубліковано: |
PROBLEMS IN PROGRAMMING
2024
|
| Теми: | |
| Онлайн доступ: | https://pp.isofts.kiev.ua/index.php/ojs1/article/view/665 |
| Теги: |
Додати тег
Немає тегів, Будьте першим, хто поставить тег для цього запису!
|
| Назва журналу: | Problems in programming |
| Завантажити файл: |  |
Репозитарії
Problems in programming| id |
pp_isofts_kiev_ua-article-665 |
|---|---|
| record_format |
ojs |
| resource_txt_mv |
ppisoftskievua/aa/660c2813790e09c347b7e79da4a06aaa.pdf |
| spelling |
pp_isofts_kiev_ua-article-6652025-02-15T15:39:16Z Video-based visualization of debugging process Відеовізуалізація процесу налагодження Shynkarenko, V.I. Zhevaho, О.O. debugging; visualization; video; education; software engineering; constructive-synthesizing modeling UDC 004.9 налагодження; візуалізація; відео; навчання; інженерія програмного забезпечення; конструктивно-продукційне моделювання УДК 004.9 One of the current trends in education is microlearning, which involves the use of short videos in the learning process. Microlearning has a number of advantages, including the fact that this approach is more student-centered, aims to increase the level of knowledge assimilation, requires less time for learning, and allows learning anytime and anywhere. In previous works, the authors have developed a constructive production model and corresponding software for tracking programmer's actions during the preparation of program text and debugging in the Visual Studio development environment. This article presents an extension of these software tools. Based on the collected information in the log files about the program debugging processes, their visualization is performed, which reproduces the sequence of actions during the original debugging process. The goal is to increase the efficiency and effectiveness of programming education. The video-based visualization demonstrates the programmer's work on preparing and correcting the code during debugging and is synchronized with the time stamps in the log files only during periods of activity. Comments are overlaid on the video, providing explanations and suggestions for improving the debugging process. Comments help to understand the rationale for specific actions taken during debugging and provide guidance on how to improve processes or use alternative approaches. The benefit of visualization for the teacher is the ability to: analyze the debugging process of a particular student, identify typical mistakes of a particular group of students, adjust the teaching process accordingly, and provide targeted assistance in improving debugging skills. Benefits for the student: the ability to analyze your own work, develop critical thinking on how to improve it, and receive timely assistance from the teacher.Prombles in programming 2024; 2-3: 426-433 Одним із сучасних трендів в освіті є мікронавчання, яке передбачає використання коротких відеороликів у навчальному процесі. Мікронавчання має низку переваг, серед яких те, що цей підхід більш орієнтований на студента, спрямований на підвищення рівня засвоєння знань, вимагає менше часу на навчання, дає можливість навчатися в будь-який час і в будь-якому місці. У попередніх роботах авторами розроблена конструктивно-продукційна модель і відповідне програмне забезпечення, щодо відстеження дій програміста під час підготовки тексту програми та налагодження в середовищі розробки Visual Studio. У даній роботі представлений розвиток цих програмних засобів. На основі зібраної інформації у файлах логів щодо процесів налагодження програм виконується їхня візуалізація, яка відтворює послідовність дій під час оригінального процесу налагодження. Метою є підвищення ефективності та результативності навчання програмуванню. Відеовізуалізація демонструє роботу програміста з підготовки та коригування коду під час налагодження, та синхронізована з часовими мітками у файлах логів лише у періоди активності. Виконується накладання коментарів на відео, де надаються пояснення та пропозиції щодо покращення процесу налагодження. Коментарі допомагають зрозуміти обґрунтування конкретних дій, виконаних під час налагодження, та надають вказівки щодо покращення процесів або використання альтернативних підходів. Користь візуалізації для викладача полягає у можливості: аналізу процесу налагодження конкретного студента, виявленні типових помилок конкретної групи студентів, коригування процесу навчання та допомоги в удосконаленні навичок налагодження. Користь для студента: можливість аналізу своєї роботи, розвиток критичного мислення щодо її удосконалення, можливість отримання своєчасної допомоги від викладача.Prombles in programming 2024; 2-3: 426-433 PROBLEMS IN PROGRAMMING ПРОБЛЕМЫ ПРОГРАММИРОВАНИЯ ПРОБЛЕМИ ПРОГРАМУВАННЯ 2024-12-17 Article Article application/pdf https://pp.isofts.kiev.ua/index.php/ojs1/article/view/665 10.15407/pp2024.02-03.426 PROBLEMS IN PROGRAMMING; No 2-3 (2024); 426-433 ПРОБЛЕМЫ ПРОГРАММИРОВАНИЯ; No 2-3 (2024); 426-433 ПРОБЛЕМИ ПРОГРАМУВАННЯ; No 2-3 (2024); 426-433 1727-4907 10.15407/pp2024.02-03 en https://pp.isofts.kiev.ua/index.php/ojs1/article/view/665/717 Copyright (c) 2024 PROBLEMS IN PROGRAMMING |
| institution |
Problems in programming |
| baseUrl_str |
https://pp.isofts.kiev.ua/index.php/ojs1/oai |
| datestamp_date |
2025-02-15T15:39:16Z |
| collection |
OJS |
| language |
English |
| topic |
debugging visualization video education software engineering constructive-synthesizing modeling UDC 004.9 |
| spellingShingle |
debugging visualization video education software engineering constructive-synthesizing modeling UDC 004.9 Shynkarenko, V.I. Zhevaho, О.O. Video-based visualization of debugging process |
| topic_facet |
debugging visualization video education software engineering constructive-synthesizing modeling UDC 004.9 налагодження візуалізація відео навчання інженерія програмного забезпечення конструктивно-продукційне моделювання УДК 004.9 |
| format |
Article |
| author |
Shynkarenko, V.I. Zhevaho, О.O. |
| author_facet |
Shynkarenko, V.I. Zhevaho, О.O. |
| author_sort |
Shynkarenko, V.I. |
| title |
Video-based visualization of debugging process |
| title_short |
Video-based visualization of debugging process |
| title_full |
Video-based visualization of debugging process |
| title_fullStr |
Video-based visualization of debugging process |
| title_full_unstemmed |
Video-based visualization of debugging process |
| title_sort |
video-based visualization of debugging process |
| title_alt |
Відеовізуалізація процесу налагодження |
| description |
One of the current trends in education is microlearning, which involves the use of short videos in the learning process. Microlearning has a number of advantages, including the fact that this approach is more student-centered, aims to increase the level of knowledge assimilation, requires less time for learning, and allows learning anytime and anywhere. In previous works, the authors have developed a constructive production model and corresponding software for tracking programmer's actions during the preparation of program text and debugging in the Visual Studio development environment. This article presents an extension of these software tools. Based on the collected information in the log files about the program debugging processes, their visualization is performed, which reproduces the sequence of actions during the original debugging process. The goal is to increase the efficiency and effectiveness of programming education. The video-based visualization demonstrates the programmer's work on preparing and correcting the code during debugging and is synchronized with the time stamps in the log files only during periods of activity. Comments are overlaid on the video, providing explanations and suggestions for improving the debugging process. Comments help to understand the rationale for specific actions taken during debugging and provide guidance on how to improve processes or use alternative approaches. The benefit of visualization for the teacher is the ability to: analyze the debugging process of a particular student, identify typical mistakes of a particular group of students, adjust the teaching process accordingly, and provide targeted assistance in improving debugging skills. Benefits for the student: the ability to analyze your own work, develop critical thinking on how to improve it, and receive timely assistance from the teacher.Prombles in programming 2024; 2-3: 426-433 |
| publisher |
PROBLEMS IN PROGRAMMING |
| publishDate |
2024 |
| url |
https://pp.isofts.kiev.ua/index.php/ojs1/article/view/665 |
| work_keys_str_mv |
AT shynkarenkovi videobasedvisualizationofdebuggingprocess AT zhevahooo videobasedvisualizationofdebuggingprocess AT shynkarenkovi vídeovízualízacíâprocesunalagodžennâ AT zhevahooo vídeovízualízacíâprocesunalagodžennâ |
| first_indexed |
2025-07-17T09:37:01Z |
| last_indexed |
2025-07-17T09:37:01Z |
| _version_ |
1850412938286858240 |
| fulltext |
426
Освітні та навчальні аспекти програмування
УДК 004.9 http://doi.org/10.15407/pp2024.02-03.426
В.І. Шинкаренко, О.О. Жеваго
ВІДЕОВІЗУАЛІЗАЦІЯ ПРОЦЕСУ НАЛАГОДЖЕННЯ
Одним із сучасних трендів в освіті є мікронавчання, яке передбачає використання коротких відеоро-
ликів у навчальному процесі. Мікронавчання має низку переваг, серед яких те, що цей підхід більш
орієнтований на студента, спрямований на підвищення рівня засвоєння знань, вимагає менше часу на
навчання, дає можливість навчатися в будь-який час і в будь-якому місці. У попередніх роботах ав-
торами розроблена конструктивно-продукційна модель і відповідне програмне забезпечення, щодо
відстеження дій програміста під час підготовки тексту програми та налагодження в середовищі роз-
робки Visual Studio. У даній роботі представлений розвиток цих програмних засобів. На основі зібра-
ної інформації у файлах логів щодо процесів налагодження програм виконується їхня візуалізація,
яка відтворює послідовність дій під час оригінального процесу налагодження. Метою є підвищення
ефективності та результативності навчання програмуванню. Відеовізуалізація демонструє роботу
програміста з підготовки та коригування коду під час налагодження, та синхронізована з часовими
мітками у файлах логів лише у періоди активності. Виконується накладання коментарів на відео, де
надаються пояснення та пропозиції щодо покращення процесу налагодження. Коментарі допомага-
ють зрозуміти обґрунтування конкретних дій, виконаних під час налагодження, та надають вказівки
щодо покращення процесів або використання альтернативних підходів. Користь візуалізації для ви-
кладача полягає у можливості: аналізу процесу налагодження конкретного студента, виявленні ти-
пових помилок конкретної групи студентів, коригування процесу навчання та допомоги в удоскона-
ленні навичок налагодження. Користь для студента: можливість аналізу своєї роботи, розвиток кри-
тичного мислення щодо її удосконалення, можливість отримання своєчасної допомоги від викладача.
Ключові слова: налагодження, візуалізація, відео, навчання, інженерія програмного забезпечення,
конструктивно-продукційне моделювання.
V.I. Shynkarenko, О.O. Zhevaho
VIDEO-BASED VISUALIZATION OF DEBUGGING PROCESS
One of the current trends in education is microlearning, which involves the use of short videos in the learn-
ing process. Microlearning has a number of advantages, including the fact that this approach is more stu-
dent-centered, aims to increase the level of knowledge assimilation, requires less time for learning, and al-
lows learning anytime and anywhere. In previous works, the authors have developed a constructive-
production model and corresponding software for tracking programmer's actions during the preparation of
program text and debugging in the Visual Studio development environment. This article presents an exten-
sion of these software tools. Based on the collected information in the log files about the program debugging
processes, their visualization is performed, which reproduces the sequence of actions during the original de-
bugging process. The goal is to increase the efficiency and effectiveness of programming education. The
video-based visualization demonstrates the programmer's work on preparing and correcting the code during
debugging and is synchronized with the time stamps in the log files only during periods of activity. Com-
ments are overlaid on the video, providing explanations and suggestions for improving the debugging pro-
cess. Comments help to understand the rationale for specific actions taken during debugging and provide
guidance on how to improve processes or use alternative approaches. The benefit of visualization for the
teacher is the ability to: analyze the debugging process of a particular student, identify typical mistakes of a
particular group of students, adjust the teaching process accordingly, and provide targeted assistance in im-
proving debugging skills. Benefits for the student: the ability to analyze your own work, develop critical
thinking on how to improve it, and receive timely assistance from the teacher.
Key words: debugging, visualization, video, education, software engineering, constructive-synthesizing
modeling.
Вступ
Систематично перевіряти програми
на наявність помилок, знаходити та випра-
вляти їх – основна компетенція розробни-
ків програмного забезпечення. Професійні
програмісти витрачають від 20% до 40%
свого часу на налагодження [1]. Цей пока-
© В.І. Шинкаренко, О.О. Жеваго, 2024
ISSN 1727-4907. Проблеми програмування. 2024. №2-3
427
Освітні та навчальні аспекти програмування
зник набагато вищий у початківців, оскі-
льки вони роблять більше помилок під час
написання коду і відповідно повинні час-
тіше налагоджувати свій код.
Навчанню налагодження часто не
приділяється достатньо часу, навіть інко-
ли його не включено до курсів програму-
вання і, як наслідок, студенти недостатньо
знайомі з методами, концепціями та стра-
тегіями налагодження, які потенційно мо-
гли б покращити їхні навички налаго-
дження.
Наприклад, програмісти-початківці
зазвичай переглядають проблемні програ-
ми без будь-якого плану. Вони схильні
вносити зміни випадковим чином, щоб
зменшити різницю між помилковою та ці-
льовою програмами, під час яких іноді за-
бувають повернути неправильні модифіка-
ції та вносять нові помилки [2].
Початківцям важко отримати від-
мінні навички налагодження, просто на-
вчившись писати програми. Тому новач-
кам слід надавати чіткі навчальні інструк-
ції для вивчення ефективних стратегій на-
лагодження. Навчання налагодження по-
винно відбуватися на ранніх етапах, щоб
новачки не намагалися налагодити свої
програми за допомогою імпровізованих і
безсистемних методів.
Хоча різні моделі налагодження
можуть містити різні підзадачі налаго-
дження, їх можна згрупувати у чотири ос-
новні: ідентифікація проблеми (порівнюю-
чи очікувані та отримані результати робо-
ти програми), локалізація помилки, випра-
влення помилки та перевірка рішення.
Ці чотири підзадачі є фактично
фундаментальними кроками, з якими роз-
робники зазвичай стикаються під час на-
лагодження. Використання систематично-
го поетапного підходу до налагодження
покращить навички налагодження, збіль-
шивши швидкість і правильність налаго-
дження та зменшивши кількість введених
помилок [2].
Багато студентів потребують допо-
моги в налагодженні, щоб досягти прогре-
су, коли вони вчяться писати програми.
Особиста взаємодія з окремими студента-
ми для надання зворотного зв'язку щодо
їхніх програм, хоча і є безумовно ефектив-
ною для полегшення їхнього навчання,
стає все складнішою у зв'язку зі збільшен-
ням кількості студентів та дистанційною
формою навчання. Викладачі не в змозі
працювати цілодобово, щоб надавати до-
помогу студентам, коли кожен навчається
у своєму власному темпі.
Онлайн-навчання суттєво змінило
спосіб викладання, що призвело до вико-
ристання нових технологій. Відео стає
одним з інструментів, які викладачі вико-
ристовують для представлення навчаль-
ного контенту своїм студентам. Один зі
способів використання відео – інтегрува-
ти його в лекцію, щоб візуально проілюс-
трувати концепції, які інакше було б
складно пояснити за допомогою зобра-
жень і тексту.
Існує практична потреба у наданні
допомоги студентам з налагодження, щоб
навчання студентів програмуванню не бу-
ло ускладнене через їхню слабкість у по-
шуку помилок у програмах.
Пропонується новий підхід, інстру-
мент, який допоможе покращити викла-
дання на початкових курсах програмуван-
ня, надаючи студентам можливість отри-
мувати поради щодо налагодження, а ви-
кладачам бачити індивідуальні траєкторії
навчання студентів.
Основна ідея підходу полягає у
створенні комплексної відеовізуалізації
процесу налагодження, використовуючи
журнали процесів налагодження та допов-
нюючи їх візуальними підказками. Комен-
тарі слугують цінними анотаціями, які до-
помагають зрозуміти обґрунтування конк-
ретних дій, виконаних під час налагоджен-
ня, та надають вказівки щодо потенційних
покращень процесу або альтернативних
підходів.
Аналіз останніх досліджень
і публікацій
Навчання налагодження. Попри
важливість навчання налагодженню, існує
напрочуд мало досліджень, присвячених
саме навчанню стратегій налагодження та
розвитку навичок налагодження.
428
Освітні та навчальні аспекти програмування
Навчання систематичного процесу
налагодження було оцінено в декількох
роботах [2, 3]. Багато студентів не знайомі
з процесом налагодження та стратегіями
налагодження взагалі, і, як наслідок, засто-
совують метод спроб і помилок. Навчання
студентів ефективному, систематичному
процесу налагодження та іншим стратегі-
ям налагодження під час навчання програ-
мування вирішило б цю проблему. В цих
дослідженнях розробили систематичну
процедуру налагодження, яка ґрунтувалася
на "науковому методі": на основі спосте-
режуваної поведінки програми формулю-
ються гіпотези, які перевіряються в експе-
риментах і, за необхідності, уточнюються
доти, доки не буде знайдено причину. Ре-
зультати досліджень показали, що експе-
риментальна група досягла значно вищих
результатів у тестах із налагодження, а,
отже, навчання студентів стратегіям нала-
годження є корисним і дійсно необхідним.
Вказані дослідження надають емпі-
ричні аргументи на користь викладання
стратегій та методів налагодження, і дово-
дять, що процес навчання програмуванню
може бути полегшений ефективним про-
цесом налагодження.
Зворотний зв’язок та візуалізація.
Своєчасний зворотний зв'язок важливий
для того, щоб спрямовувати студентів під
час самостійної роботи над вправами з
програмування. Оскільки стає дедалі нере-
алістичніше очікувати на індивідуальну
взаємодію викладачів зі студентами, дос-
лідники створюють різноманітні автомати-
зовані системи для полегшення навчання
та надання своєчасного зворотного зв'язку.
У минулому було проведено багато
досліджень щодо надання автоматизованої
допомоги студентам у вивченні написання
програм, але є відносно мало робіт щодо
надання автоматизованої підтримки з на-
лагодження для студентів.
У процесі автоматичного створення
зворотного зв'язку для завдань із програ-
мування ключовою проблемою є розробка
підказок, які є настільки ж ефективними,
як і зворотний зв'язок, що надається ви-
кладачами особисто.
Однією із систем візуалізації про-
грам для надання інтерактивних персона-
лізованих підказок є TraceDiff [4].
TraceDiff це інструмент, який порівнює
динамічне виконання некоректного та ко-
ректного коду і показує, як помилка приз-
водить до різниці в поведінці, й де трасу-
вання некоректного коду відхиляється від
очікуваного рішення.
Інший підхід до візуалізації процесу
розробки програмного забезпечення - ви-
користання засобів розширення середовищ
розробки [5].
Окрім систем візуалізації, деякі до-
слідники створили інтерактивні середови-
ща розробки, пристосовані для навчання
студентів на вступних курсах програму-
вання [6].
Використання відео як варіант до-
кументації у поєднанні з додатковою інфо-
рмацією застосовувався для тестування
графічного інтерфейсу [7], коли записують
відео під час виконання тестів для допов-
нення тестових звітів.
Однією з небагатьох систем надан-
ня практичних автоматизованих порад з
налагодження для підтримки навчання
студентів є Virtual Debugging Advisor
(ViDA). Система заснована на розпізна-
ванні поширених помилок у програмах
студентів [8]. Результати дослідження вка-
зують на те, що з увімкненим ViDA біль-
ший відсоток студентів змогли виправити
власні помилки, а переважна більшість ре-
спондентів вважають ViDA корисним для
навчання програмуванню.
Попри значний прогрес у розробці
автоматизованих систем для навчання про-
грамуванню та надання зворотного зв'язку
студентам, досліджень у сфері надання
автоматизованої підтримки з налагоджен-
ня для студентів є відносно мало. Це вка-
зує на те, що наявні роботи зосереджені
переважно на навчанні написання коду, а
не на важливому етапі налагодження про-
грамного забезпечення. Таким чином, бі-
льша увага до створення і вдосконалення
автоматизованих систем, спрямованих на
підтримку налагодження програм, є важ-
ливим завданням для подальшого розвитку
освіти в галузі програмування.
429
Освітні та навчальні аспекти програмування
Мета та завдання дослідження
Метою даного дослідження є роз-
робка інструментів для автоматизованого
створення відеовізуалізації процесу нала-
годження, використовуючи наявні журна-
ли процесів налагодження та доповнюючи
їх візуальними підказками. За допомогою
цього вдасться вдосконалити процес нав-
чання студентів налагодженню.
Для досягнення мети були постав-
лені такі завдання:
− розробити інструмент для візуа-
лізації процесу налагодження, який наочно
демонструє послідовність дій на основі
журналів подій, отриманих із середовища
розробки за роботою [9];
− доповнити відео коментарями,
які надають пояснення та пропозиції щодо
покращення процесу налагодження;
− перевірити розроблений інстру-
мент на журналах, зібраних під час експе-
рименту представленого у [10].
Відеовізуалізація процесу
налагодження
У попередніх роботах, використо-
вуючи методологію конструктивно-
продукційного моделювання, розроблено
конструктор, призначений для створення
файлу журналу налагоджувальної діяльно-
сті для формалізації процесу збору даних
про використання середовища розробки
під час налагодження. На основі конструк-
тивної моделі розроблено розширення до
середовища розробки Microsoft Visual
Studio, в якому всі налагоджувальні дії ра-
зом із контекстом фіксуються в журналі
подій [9].
У даній роботі ми представляємо
розвиток цих програмних засобів. На ос-
нові розроблених моделей і засобів ство-
рюється система для візуалізація зібраної
інформації, яка відтворює послідовність
дій під час процесу налагодження.
Для візуалізації процесу налаго-
дження розроблено програмне забезпечен-
ня, яке складається з наступних компонен-
тів:
1. WebUI – надає веб-інтерфейс для
доступу до функцій системи.
2. LogAPI – містить RESTful API
для приймання журналів подій із середо-
вища розробки.
3. DataManagement – надає CRUD
операції для роботи з файлами журналів
логів та відео.
4. LogDataProcessor – відповідає за
обробку журналів подій, отриманих із се-
редовища розробки. Журнали слугують
основою для реконструкції сеансів налаго-
дження і надання рекомендацій.
5. CommentGenerator – генерує ко-
ментарі, які містять пояснення подій з
файлу журналу та рекомендації щодо на-
лагоджувальних дій. Ці коментарі базу-
ються на аналізі процесу налагодження для
визначення ефективних стратегій і підхо-
дів, що підвищує освітню цінність відео.
6. VideoGenerator – використовуючи
оброблені дані журналу та коментарі, ге-
нерує відеопредставлення процесу налаго-
дження. Це відео фіксує взаємодію корис-
тувача з кодом, надає пояснення та реко-
мендації щодо налагоджувальних дій і си-
нхронізується з часовими мітками з даних
журналу. Періоди без активних дій пропу-
скаються, щоб зробити відео коротшим і
більш інформативним. Ці моменти відо-
бражаються в коментарях.
Розроблений інструмент є програм-
ним засобом, спрямованим на автоматизо-
ване створення відеовізуалізації процесу
налагодження програмного забезпечення.
Він працює на основі журналів подій
(файлів логів), отриманих із середовища
розробки, які генеруються в режимі реаль-
ного часу, коли розробник працює з текс-
том програми. Кожна дія записується ра-
зом з міткою часу та контекстом, забезпе-
чуючи хронологічний запис процесу нала-
годження. Для фіксування усіх подій разом
з контекстною інформацією в середовищі
розробки використовується інструмент,
представлений в [9].
Використовуючи наявні журнали та
доповнюючи їх візуальними підказками,
наш підхід пропонує цілісний погляд на
процес налагодження, прояснюючи послі-
довність дій та стратегій, які застосовують
розробники.
Відеопредставлення дій з налаго-
дження є цінним ресурсом як для виклада-
430
Освітні та навчальні аспекти програмування
чів, так і для студентів. Воно дозволяє сту-
дентам спостерігати ефективні стратегії
налагодження в дії, допомагаючи розвива-
ти основні навички налагодження. До ві-
деоролика додані підказки та рекомендації,
які надають користувачу додаткові пояс-
нення щодо кожної дії в процесі налаго-
дження.
Перелічені функції та особливості
розробленого інструменту спрямовані на
підвищення ефективності навчання нала-
годження програмного забезпечення. Візу-
альна форма представлення інформації до-
помагає студентам краще зрозуміти процес
налагодження та швидше опановувати не-
обхідні навички.
Інтерфейс інструменту візуалізації
налагодження (рис. 1) призначений для
надання користувачам комплексного уяв-
лення про процес налагодження, інтегрую-
чи: загальну інформацію про сеанси нала-
годження (GeneralInfoSection), відобра-
ження коду (CodeSection), та коментарі з
рекомендаціями (CommentsSection).
Секція GeneralInfoSection відобра-
ження загальної інформації містить: номер
поточної сесії налагодження (у прикладі
перша), загальну кількість сесій (у прикла-
ді чотири), а також тривалість поточної се-
сії (у прикладі 30 с).
Секція CodeSection відображення
коду займає помітну частину інтерфейсу,
показуючи вихідний код, що налагоджу-
ється і надає декілька функцій:
− підсвічування синтаксису для
покращення читабельності;
− індикація точок зупинки за до-
помогою візуальних маркерів, у двох ре-
жимах: активна (зелена) і не активна (чер-
вона);
− підсвічування поточного вико-
нуваного рядка.
Секція CommentsSection з комента-
рями та рекомендаціями розташована по-
ряд з відображенням коду і надає інфор-
мацію, яка пояснює дії, виконані під час
налагодження, та вказівки щодо альтерна-
тивних рішень. Кожен коментар відобра-
жається з урахуванням часу відносно мі-
ток часу у файлі журналу і тривалості се-
сії, що дозволяє візуально відстежувати
хід процесу налагодження. Рекомендації
та підказки виділяються іншим кольором,
щоб відрізнити їх від звичайних комента-
Рис. 1. Один кадр візуалізації процесу налагодження
431
Освітні та навчальні аспекти програмування
рів. Під час візуалізації налагодження ві-
дповідні коментарі з'являються динамічно
для забезпечення контексту і розуміння
процесу.
Інтерфейс інструменту візуалізації
процесу налагодження розроблений таким
чином, аби бути інтуїтивно зрозумілим,
інформативним і зручним для користувача,
надаючи цілісне і глибоке уявлення про
процес налагодження разом з відповідни-
ми коментарями та рекомендаціями.
Валідація розроблених
інструментів
Для перевірки функціональності ро-
зробленого інструменту він пройшов рете-
льне тестування з використанням журна-
лів, зібраних під час попередніх експери-
ментів [10].
В експерименті у вигляді олімпіади
з налагодження брали участь студенти з
першого по п’яті курси. Під час експери-
менту було сформовано 487 файлів журна-
лів подій для 41 учасника, на основі яких
здійснювалася перевірка розробленого
програмного забезпечення.
Етап тестування мав на меті оціни-
ти точність відображення відео, а також
правильність генерації коментарів.
Інструмент успішно реконструював
процес налагодження, точно зафіксувавши
послідовність дій учасників. Отримані ві-
део відображають взаємодію студента з
кодом, забезпечуючи чітке візуальне пред-
ставлення сеансу налагодження.
В результаті тестування підтвер-
джено працездатність представленого під-
ходу. Отримані коментарі добре корелю-
ють із результатами попереднього дослі-
дження навичок налагодження [10].
Висновки
У роботі представлено новий під-
хід, який пропонує практичне рішення для
покращення навичок налагодження за до-
помогою наочних відеопосібників з нала-
годження.
Запропонований підхід спрямова-
ний на підвищення ефективності та ре-
зультативності навчання налагодження.
Поєднуючи візуальне представлення з де-
тальним описом дій, коментарями та реко-
мендаціями, наш підхід покращує розу-
міння процесів та полегшує передачу
знань. Коментарі слугують джерелом ін-
формації про причини певних дій, надаю-
чи вказівки щодо потенційних поліпшень
процесів та альтернативних підходів.
Інтеграція відеовізуалізації з дани-
ми файлів логів пропонує перспективний
шлях для покращення навчального проце-
су з налагодження. Надаючи комплексне
візуальне представлення процесу налаго-
дження, новачки можуть краще зрозуміти
його тонкощі, тим самим заповнюючи
прогалину в навчанні налагодження.
Також цей інструмент може бути
корисним для викладачів. Інструмент по-
легшує моніторинг розвитку навичок нала-
годження у студентів.
Аналізуючи індивідуальні навчаль-
ні траєкторії, викладачі мають змогу оці-
нити прогрес кожного студента з плином
часу. Відстежуючи покращення навичок
налагодження та визначаючи постійні
проблеми, вони корегують методи викла-
дання, щоб краще відповідати потребам
своїх студентів.
Вивчаючи закономірності у проце-
сах налагодження, викладачі можуть ви-
явити типові помилки. Ця інформація мо-
же бути використана для розробки навча-
льних матеріалів, спрямованих на розв'я-
зання проблемних питань.
Подальша робота може бути зосе-
реджена на розширенні функціональності
інструменту та проведенні додаткових до-
сліджень для подальшого підтвердження
його ефективності та зручності викорис-
тання.
Література
1. M. Perscheid, B. Siegmund, M. Taeumel, R.
Hirschfeld, Studying the advancement in
debugging practice of professional software
developers, Software Quality Journal, 2017.
C. 83–110. https://doi.org/10.1007/s11219-
015-9294-2.
2. T. Michaeli, R. Romeike, Improving
debugging skills in the classroom: The effects
of teaching a systematic debugging process,
14th Workshop in Primary and Secondary
432
Освітні та навчальні аспекти програмування
Computing Education, 2019. C. 1–7.
https://doi.org/10.1145/3361721.3361724.
3. X. Gao, K. F. Hew, A Flipped Systematic
Debugging Approach to Enhance Elementary
Students’ Program Debugging Performance
and Optimize Cognitive Load, Journal of
Educational Computing Research, 2023. C.
1064–1095.
https://doi.org/10.1177/07356331221133560
4. R. Suzuki, G. Soares, A. Head, E. Glassman,
R. Reis, M. Mongiovi, L. D’Antoni, B.
Hartmann, TraceDiff: Debugging Unexpected
Code Behavior Using Trace Divergences,
2017 IEEE Symposium on Visual Languages
and Human-Centric Computing, 2017. C.
107–115.
https://doi.org/10.1109/VLHCC.2017.810345
7.
5. V. Shynkarenko, O. Zhevago, Visualization of
program development process, 2019 IEEE
14th International Conference on Computer
Sciences and Information Technologies, 2019.
C. 142–145. https://doi.org/10.1109/STC-
CSIT.2019.8929774.
6. J. Moons, C. De Backer, The design and pilot
evaluation of an interactive learning
environment for introductory programming
influenced by cognitive load theory and
constructivism, Computers & Education,
2013. С. 368–384.
https://doi.org/10.1016/j.compedu.2012.08.00
9.
7. J. Shi, K. Schneider, Creation of Human-
friendly Videos for Debugging Automated
GUI-Tests, ICTSS 2021, 2022. С. 141–147.
https://doi.org/10.1007/978-3-031-04673-
5_11.
8. V. C. Lee, Y. T. Yu, C. M. Tang, T. L. Wong,
C. K. Poon, ViDA: A virtual debugging
advisor for supporting learning in computer
programming courses, Journal of Computer
Assisted Learning, 2018. С. 243–258.
http://doi.org/10.1111/jcal.12238.
9. V. Shynkarenko, O. Zhevaho, Development
of a toolkit for analyzing software debugging
processes using the constructive approach,
Eastern-European Journal of Enterprise
Technologies, 2020. С. 29–38.
https://doi.org/10.15587/1729-
4061.2020.215090.
10. В. І. Шинкаренко, О. О. Жеваго, Експери-
ментальні дослідження процесів налаго-
дження комп'ютерних програм студентами
з використанням Process Mining, Вісник
Херсонського Національного технічного
університету, 2021. С. 83–98.
http://doi.org/10.35546/kntu2078-
4481.2021.3.9.
References
1. M. Perscheid, B. Siegmund, M. Taeumel, R.
Hirschfeld, Studying the advancement in
debugging practice of professional software
developers, Software Quality Journal, 2017,
pp. 83–110. https://doi.org/10.1007/s11219-
015-9294-2.
2. T. Michaeli, R. Romeike, Improving
debugging skills in the classroom: The effects
of teaching a systematic debugging process,
14th Workshop in Primary and Secondary
Computing Education, 2019, pp. 1–7.
https://doi.org/10.1145/3361721.3361724.
3. X. Gao, K. F. Hew, A Flipped Systematic
Debugging Approach to Enhance Elementary
Students’ Program Debugging Performance
and Optimize Cognitive Load, Journal of
Educational Computing Research, 2023, pp.
1064–1095.
https://doi.org/10.1177/07356331221133560
4. R. Suzuki, G. Soares, A. Head, E. Glassman,
R. Reis, M. Mongiovi, L. D’Antoni, B.
Hartmann, TraceDiff: Debugging Unexpected
Code Behavior Using Trace Divergences,
2017 IEEE Symposium on Visual Languages
and Human-Centric Computing, 2017, pp.
107–115.
https://doi.org/10.1109/VLHCC.2017.810345
7.
5. V. Shynkarenko, O. Zhevago, Visualization of
program development process, 2019 IEEE
14th International Conference on Computer
Sciences and Information Technologies, 2019,
pp. 142–145. https://doi.org/10.1109/STC-
CSIT.2019.8929774.
6. J. Moons, C. De Backer, The design and pilot
evaluation of an interactive learning
environment for introductory programming
influenced by cognitive load theory and
constructivism, Computers & Education,
2013, pp. 368–384.
https://doi.org/10.1016/j.compedu.2012.08.00
9.
7. J. Shi, K. Schneider, Creation of Human-
friendly Videos for Debugging Automated
GUI-Tests, ICTSS 2021, 2022, pp. 141–147.
https://doi.org/10.1007/978-3-031-04673-
5_11.
8. V. C. Lee, Y. T. Yu, C. M. Tang, T. L. Wong,
C. K. Poon, ViDA: A virtual debugging
advisor for supporting learning in computer
programming courses, Journal of Computer
433
Освітні та навчальні аспекти програмування
Assisted Learning, 2018, pp. 243–258.
http://doi.org/10.1111/jcal.12238.
9. V. Shynkarenko, O. Zhevaho, Development
of a toolkit for analyzing software debugging
processes using the constructive approach,
Eastern-European Journal of Enterprise
Technologies, 2020, pp. 29–38.
https://doi.org/10.15587/1729-
4061.2020.215090.
10. V. Shynkarenko, O. Zhevaho, Experimental
studies of debugging processes of computer
programs by students using Process Mining,
Visnyk of Kherson National Technical
University, 2021, pp. 83–98.
http://doi.org/10.35546/kntu2078-
4481.2021.3.9.
Одержано: 09.04.2024
Внутрішня рецензія отримана: 19.04.2024
Зовнішня рецензія отримана: 23.04.2024
Про авторів:
Шинкаренко Віктор Іванович,
доктор технічних наук, професор
https://orcid.org/0000-0001-8738-7225.
Жеваго Олександр Олександрович,
доктор філософії, доцент
https://orcid.org/0000-0003-0019-8320.
Місце роботи авторів:
Український державний університет науки
і технологій,
тел. +38-056-373-15-05
E-mail: office@ust.edu.ua
Веб-сайт: https://ust.edu.ua
|