Apple iOS shortcuts (shortcut instructions) to modify web page elements: an alternative to the mobile developer tool console

Apple iOS shortcuts (shortcut instructions) related article guidelines:

Apple iOS Shortcut (Shortcut Instructions): Fill in the form automatically
Apple iOS shortcut (shortcut instructions): modify web page elements (this article)
Apple iOS shortcut (shortcut command): query course results
Apple iOS shortcut (shortcut command): one-key remote boot

Mobile browsers are generally difficult to call the developer mode. Although Android phones can implement the call of the developer mode by installing a special browser, there is no solution for Apple iOS users. But if you only need to use the console, you can actually use shortcuts (shortcut instructions) to achieve it. This article mainly introduces how to use shortcuts (shortcut instructions) to call JavaScript to modify the DOM elements of the web page to replace the regret of the lack of functions of the mobile terminal Elements and console calls.

Show results

Insert picture description here

Shortcut (shortcut instruction) to run JavaScript script on the webpage. Basic format:

var result = [];

// JavaScript代码

// 调用 Completion 以完成
completion(result);

1. Positioning elements

Insert picture description here
It can be located directly through JS PATH.

document.querySelector("#table_history_list_page > tbody > tr:nth-child(2) > td:nth-child(5) > span")

2. Rewrite elements

The rewritten content refers to the original format and is rewritten. Here, the original format 2021-01-05 14:55:42modification is taken 2021-01-08 10:55:42as an example:

document.querySelector("JS PATH").innerHTML = '2021-01-08 10:55:42'

Before rewriting:
After rewriting:

3. Time selector for shortcut commands

If you modify the time manually, you need to manually edit the time before each shortcut command is run. The “current date” function of the shortcut command can locate the time as the day when the command is executed. You only need to modify the format to get rid of the trouble of editing the date. .

Insert picture description here

document.querySelector("JS PATH").innerHTML ="当前日期";

Insert picture description here

当前日期Set the parameter format to in the shortcut (shortcut command) yyyy-MM-dd 14:55:42to keep the time unchanged and only change the date.
Insert picture description here

Full content

var result = [];
// JavaScript代码
document.querySelector("#table_history_list_page > tbody > tr:nth-child(1) > td:nth-child(5) > span").innerHTML = '2021-01-08 00:00:39'
document.querySelector("#table_history_list_page > tbody > tr:nth-child(2) > td:nth-child(5) > span").innerHTML = '2021-01-08 10:55:42'
document.querySelector("#table_history_list_page > tbody > tr:nth-child(3) > td:nth-child(5) > span").innerHTML = '2021-01-08 11:07:10'
document.querySelector("#table_history_list_page > tbody > tr:nth-child(4) > td:nth-child(5) > span").innerHTML = '2021-01-08 11:10:05'
// 调用 Completion 以完成
completion(result);

Supplementary instructions on calling shortcuts

Insert picture description here
One problem that fans encountered in the previous article is that when clicking the "More Actions" button on the web page, there is no "Shortcut Instructions" option. The way to solve this problem is also very simple. You only need to click the "Quick Instructions". Just set it to allow it to be displayed in the sharing form of the browser.
Insert picture description here

Insert picture description here

At this point, this article has come to an end. I hope that this article can serve as an inspiration, and welcome your criticism and exchanges.

If you have any questions or good suggestions, look forward to your messages, comments and attention!