- DOM elements.
- Request/response information.
- Browser's local storage.
- And much more.
We use these tools daily and we recommend that you use them as well. Developers building mobile apps via other means use the same debugging tools. Here are a few examples (using Chrome Developer Tools).
The Network tab will show service invocation information such service headers, response and more. Use this to check that the service is invoked with correct parameters.
Once a request is selected, you can view its response:
Browser local storage plays an important role in many apps. You can quickly view its content as shown below. For example, if your app saves a value into the storage, you can check to make sure that the correct value is saved. Note that local storage shown will be different for each domain. Browser local storage is a standard browser API supported by modern browsers.
Visit this page to learn more.
Inspecting the DOM elements to view the app-generated code.
Use the inspect function to see the exact code which runs in the browser.
Browsers love to cache files which sometimes leads to things not working as expected, such as when a new version of a file doesn’t load. It’s always a good idea to clear the browser cache from the browser menu.
If you are using the Chrome browser, here is another (and usually better) way to clear the cache:
chrome://appcache-internals/in the address bar
- Find the entry that looks like this:
- Click Remove
- Reload the app or the app builder
If the project does not load in the Chrome browser try these steps:
- Open browser debugger (F12)
- Go to the Network tab
- Click the Disable cache checkbox:
- Clear the cache.
- Reload the App Builder.
- If project loads correctly then you can uncheck this option.
Please note that disabling cache makes things run a little bit slower.
http://caniuse.com/ – compatibility tables for HTML5, CSS3, SVG, etc., support in desktop and mobile browsers.
Read more here: https://css-tricks.com/debugging-tips-tricks/
Updated over 1 year ago