Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

Debugging

Debugging a page or a project

PreviousNon Web DevelopersNextVersion

Last updated 3 years ago

Was this helpful?

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

Example Project

Messages Console
https://code.visualstudio.com/code.visualstudio.com
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServermarketplace.visualstudio.com
LogoFirefox Developer EditionMozilla
LogoFirefox Developer Tools | MDN
Logoxd-examples/web-export/examples/debugging at master · velara3/xd-examplesGitHub
Debugging