Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Browser Developer Tools for APEX Developers

855 vues

Publié le

Mit Oracle Application Express entwickelt man im Browser Applikationen, die im Browser laufen. Damit ist der Browser eines der wichtigsten Werkzeuge eines APEX Entwicklers. Beim Entwickeln mit SQL oder PL/SQL nutzen wir die reiche Funktionalitäten von IDEs (SQL Developer, TOAD, PLSQL Developer, ...) um produktive zu arbeiten. Das bauen von Webapplikationen beschränkt sich aber nicht die Datenbank. Man wird auch mit Techniken wie HTML, CSS und JavaScript konfrontiert.
Obwohl APEX die Komplexität, die diese Techniken mit sich mitbringen, zu einem großen Teil mit dem deklarativen Aufbau des Frameworks verbergen kann, desto mehr man mit APEX entwickelt, desto mehr wird man gezwungen sich mit der darunterliegenden Technik zu befassen. Das ist der Moment, dass man als Entwickler den Browser nicht allein als Applikations-Fenster, sondern auch als modernes Entwickeltool einsetzt.
Debugging, Testen, Performance Tuning, … dies sind nur rein paar Möglichkeiten die durch den Browser unterstützt werden. In meiner Präsentation werde ich die wichtigsten Funktionen und Features moderner Browser, die für uns APEX Entwickler das Leben einfacher machen, erläutern und demonstrieren.

Publié dans : Logiciels
  • You can try to use this service ⇒ www.HelpWriting.net ⇐ I have used it several times in college and was absolutely satisfied with the result.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • I pasted a website that might be helpful to you: ⇒ www.WritePaper.info ⇐ Good luck!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Thank you for sharing this interesting information here. Great post. And I agree with you that it is really hardly to find a student who enjoys executing college assignments. All these processes require spending much time and efforts, that is why i recommend all the students use the professional writing service ⇒ www.HelpWriting.net ⇐ Good luck.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Browser Developer Tools for APEX Developers

  1. 1. Browser Developer Tools for APEX Developers Christian Rokitta Berlin 2017
  2. 2. 1993 today 1996 1999 2009 20152010 2011 2014 Oracle Database Version 6 Hoechst AG Clinical Research Frankfurt, Germany Custom Development Utrecht, Netherlands <HTML> Oracle Consultant/Product Development Manager Utrecht, Netherlands mod_plsql Oracle Web Toolkit JavaScript(); HTML DB APEX Speaker Oracle Database & Application Express Consultant Utrecht, Netherlands {CSS} proud member of APEX UI Customization Reporting Plug-in Christian Rokitta
  3. 3. Oracle APEX Architecture Browser Mid Tier Database Tier Oracle APEX Engine Oracle Database Data Schemas App Development IDE is a web browser. No client software needed
  4. 4. IDE’s for Oracle Database • Develop • Testing • Debug • Tuning • Formatting • … PLSQL Developer TOAD SQL DeveloperSQL*Plus
  5. 5. Additional Skillset for APEX Developers
  6. 6. Evolution of the Internet
  7. 7. Evolution of the Internet http://like.allmyfaves.com/like/site/name/evolutionofweb.appspot.com
  8. 8. Desktop Browser Market Share Worldwide Jan to Dec 2009
  9. 9. Desktop Browser Market Share Worldwide Jan to Dec 2013
  10. 10. Desktop Browser Market Share Worldwide Apr 2016 to Apr 2017
  11. 11. Real Users vs Geeks aka End Users vs Developers
  12. 12. Browser Developer Tools Overview Chrome Internet Explorer/Edge macOS only same engine as Chrome(Canary)
  13. 13. How to open the DevTools • Select More Tools > Developer Tools from Chrome's Main Menu. • Right-click a page element and select Inspect. • Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). • F12
  14. 14. DevTools Panels • Elements panel Iterate on the layout and design of your site by freely manipulating the DOM and CSS. • Inspect and Tweak Your Pages • Edit Styles • Edit the DOM • Inspect Animations
  15. 15. Tips & Tricks Styling :active, :hover, :focus, :visited states It becomes a little more tricky when testing other element states such as hover. Solution: Chrome has a button built for this purpose. In the "Elements" tab's right hand column look for the dotted element/cursor icon which allows you to switch an elements states. Incrementing CSS Values If you have an element which you need to modify the margin, padding, width or height for, you can use the cursor keys to increment/decrement the size. Simply use the up and down cursor keys to increment/decrement by a unit of 1. Find in Styles While inspecting the CSS style rules for an element on a page with a lot of styles, you might get frustrated. However, you can filter the style rules easily!
  16. 16. DevTools Panels • Elements panel • Console panel Log diagnostic information during development or interact with the JavaScript on the page. • Using the Console • Interact from Command Line
  17. 17. Tips & Tricks Snippets Snippets allow you to write multi-line JavaScript code, save them in the dev tools memory (they are preserved forever, until you delete them), have a git style version history. Inspecting <iframes> from the console If one of your scripts are in an iframe, which you wish to inspect in the console, you might find that directly typing the variable names defined for the iframe won’t work. You can change the window frame you are inspecting from the console!
  18. 18. Tips & Tricks The console API The console has a very nice API. Here are 5 quick tips for the Chrome Web Console: • $ is an alias to document.querySelector, and $$ is an alias to document.querySelectorAll. • $0, $1... $4 give reference to the last 4 DOM elements selected from the DOM inspector. (So when you have to select an element, right click, and inspect element, then type $0 in the console!) • $_ holds the value for the last expression evaluated in the console. Useful when you are running a lot of expressions simultaneously. • debug(function), typing this in the console would watch for the function passed as the first parameter to be called. When it is called, the debugger will be invoked, and the script would be paused. • getEventListeners(domElement) would list all the event listeners attached to the DOM element.
  19. 19. DevTools Panels • Elements panel • Console panel • Sources panel Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor. • Debugging JavaScript • Pause Your Code With Breakpoints • DevTools Workspaces • Source mapping
  20. 20. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel Inspect page load performance and debug request issues.
  21. 21. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.
  22. 22. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel • Memory panel Profile memory usage and track down leaks. • Identify Memory Problems • JavaScript CPU Profiler
  23. 23. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel • Memory panel • Application panel Inspect all resources that are loaded, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
  24. 24. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel • Memory panel • Application panel • Security panel Debug mixed content issues, certificate problems, and more.
  25. 25. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel • Memory panel • Application panel • Security panel • Device Mode • Emulate your site across different screen sizes and resolutions, including Retina displays. • Responsively design by visualizing and inspecting CSS media queries. • Evaluate your site's load performance with the Network Conditions drawer, without affecting traffic to other tabs. • Accurately simulate device input for touch events, geolocation, and device orientation
  26. 26. DevTools Panels • Elements panel • Console panel • Sources panel • Network panel • Performance panel • Memory panel • Application panel • Security panel • Device Mode • Remote debug live content on an Android device from your Windows, Mac, Linux or Chrome computer through USB
  27. 27. Conclusion The dev tools are really very powerful and provide a great, open playground for beginners to learn, speculate, experiment, and think. If you are a beginner, make yourself comfortable with the dev- tools from the start. It would help you in your due course of learning JavaScript, as well as HTML and CSS.
  28. 28. Q&A www.rokit.nl www.themes4apex.com www.apexsmartpivot.com blog.rokit.nl @crokitta @themes4apex @apexsmartpivot www.linkedin.com/in/rokit

×