Debugging
Debugging a page or a project
Debugging is part of the development process. Having the right tools and skills helps you create the page and website you are looking to build. Debugging means finding and fixing any errors or problems you may encounter.
Debugging involves setting up the right environment. Like a mechanic that has a toolbox, workbench and a garage a web developer has a set of tools to make their job more effective.
For this guide we will describe some tools and workflows.
Here is the recommended toolset:
- Browser with developer tools
- Code editor
- Web server
- Messages panel in Web Export
The video guide below goes over the setting up your development environment with Visual Studio Code, built in server plugin for Visual Studio Code.
You can obtain Visual Studio Code here.
You can obtain Live Server for Visual Studio Code here.
You can obtain Firefox Developer browser here.
Web Developer Tools (built in to Firefox Developer edition)
The messages view in the Web Export is filled with information after export.
To put your web pages online there are a few more steps.
The export process with debugging tools involves more steps.
- Create your artboard pages in Adobe XD
- Open Web Export and export your page to a directory
- Check the Web Export messages panel for any messages and follow the advice
- Open the export directory in Visual Studio Code
- Open the page in VSC and review the code
- Select the page in VSC file directory and open in Firefox or with Live Server
- Preview the page in the browser ensuring it looks and works as expected. This can mean testing on desktop browsers (and maybe testing on mobile and tablet using the browser to simulate those views)
- Check the browser Web Inspector Tools console for any error messages
- Address any error messages
- Go back to Adobe XD to edit and make modifications to your page
- Create the next page or next view and repeat process (repeat as necessary) Next Step
- Stage the page or project online on a website and make sure everything works
- Send link to online page to any other necessary parties and have them confirm it looks and works as expected
- After receiving the green light from all parties involved publish (upload) to the production server, the live server, (late at night when no one is around) and test to make sure it all still works. Often you put a temporary page up while the transition occurs that says the site is under maintenance. Make sure you make back ups in case any problems occur that can't be quickly fixed you can revert back to the previous pages.
- When everything is tested locally contact all parties involved so that they may also view the project from their end and confirm it works
Last modified 2yr ago