Browser DevTools:
The other tool for
APEX Development

Jorge Rimblas

Twitter: @rimblas

You've had this powerful tool all along?

Jorge Rimblas

Senior APEX Consultant

  • Oracle DB since 1995
  • APEX since it was HTMLDB in 2004
  • Always involved in web technologies
  • jrimblas in OTN Forums
  • Contributor to
    "Expert Oracle Application Express, 2nd Edition"
    with "Themes & Templates" chapter

Custom Development, Cloud, Forms Modernization,
EBS Extensions

Consulting, Coaching, and Team Augmentation

Maintenance and Enhancement Service for apps built with APEX

Committed to APEX Innovation & Best Practices

Internationally recognized staff that includes Oracle ACEs

Objective

Improve your APEX development and troubleshooting ability

Availability

Everywhere

Navigation

Right Click -> Inspect

Activate

F12

Open Console

⌘ Opt  j

Ctrl Shift  j

Mac

Win

Open DevTools

⌘ Opt  i

Ctrl Shift  i

Mac

Win

Manipulate CSS Values

Arrow Keys

Move between attributes

or Shift-Tab

tab

Demo

Exploring

Modify in-line styles

Modify Classes

Pseudo Classes

Last Selection

Use

$0

$0 is like using 

this.triggeringElement
$v("{ITEM}");


// Get page PK
$v("P30_ID");

// Long form
apex.item("P30_ID").getValue()

Get Item Value with JavaScript; API $v

$v
  • Often used as part of several DA True Actions.
  • Often used to set a hidden item
    • Hidden Item needs: "Value Protected" = No
$s("{ITEM}", "{VALUE}");


// Set to today
$s("P30_LOG_DATE", "&P30_TODAY.");


// Clear date
$s("P30_LOG_DATE", "");

// Long form
apex.item("P101_USERNAME").setValue();

Set Value with JavaScript; API $s

$x("{ITEM}");


// Get page PK
$x("P30_ID");

// Long form
apex.item("P101_USERNAME").node

Get Item DOM Reference with JavaScript; API $x

$x

Demo

Network

CSS

JS

images

Client Side

Server Side

AJAX

JavaScript

SQL

PL/SQL

Network Tab

all network related activity

Inspect Submission

P110_DEPTNO is sent

APEX 4.2

APEX 5.0

P110_DEPTNO is sent

APEX 5.1 - 19.2

and beyond...

Demo

Miscellaneous Features

Network: Preserve Log

Network: Persist Log

Console: Preserve Log

Console: Persist Log

Screenshots

Full Web page!

Command Palette

⌘ - Shift -P

Ctrl - Shift -P

Use Page Actions

Command Palette

⌘ - Shift -P

Ctrl - Shift -P

console.log

> console.log("message");
message

> var savepos = 273;
> console.log(savepos);
273

> console.log({savepos});
{savepos:273}

console.log

wrap variables in { }

Not just console.log

console.log("log message");

console.info("info message");

console.debug("debug message");

console.warn("warn message");

console.error("error message");

console.table

pretty print array data

Demo

Q&A

This is a good time to fill out the evaluations

References

Browser DevTools:
The other tool for
APEX Development

Jorge Rimblas

Twitter: @rimblas

Browser DevTools: The other tool for APEX Development

By Jorge Rimblas

Browser DevTools: The other tool for APEX Development

APEX development is not just about Oracle PL/SQL and SQL. In fact, it requires other disciplines to provide an enhanced user experience. With some knowledge of HTML, CSS, and JavaScript, your APEX applications can begin to shine. However, you need a helper to better work with these technologies. If you're running SQL, you may use SQL Developer, but what do you use for HTML, JavaScript, and CSS? Enter DevTools. In this session, we'll cover the built-in DevTools available in all modern browsers. Learn the ins and outs of these tools and how they improve your everyday work with Apex. They are easy to use. No installation required and a just keystroke away. After attending this session, you'll be able to use your browser's Dev Tools immediately.

  • 1,190
Loading comments...

More from Jorge Rimblas