Using Browser Dev. Tools
Using browser debug tools
- 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).
Checking Service Invocation
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:
Viewing Browser Local Storage
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 Browser DOM
Inspecting the DOM elements to view the app-generated code.
Use the inspect function to see the exact code which runs in the browser.
Clearing Browser Cache
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 check box:
- 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.
Checking JSON/XML response
http://jsonlint.com (or http://www.xmlvalidation.com/) – to check if your JSON response has a valid format.
Browser Support for Specific Features
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 5 months ago