1 | let consoleLog = console.log |
2 | let consoleError = console.error |
3 | let consoleWarn = console.warn |
4 | |
5 | const containerStyles = {
|
6 | position: 'fixed', |
7 | overflow: 'scroll', |
8 | width: '300px', |
9 | height: '450px', |
10 | display: 'none', |
11 | bottom: '85px', |
12 | zIndex: 100000, |
13 | wordWrap: 'break-word', |
14 | overflowWrap: 'break-word', |
15 | right: '20px', |
16 | marginLeft: '15px', |
17 | backgroundColor: '#fff', |
18 | borderRadius: '8px', |
19 | boxShadow: '2px 4px 5px 3px rgba(224, 224, 224, 0.8)' |
20 | } |
21 | |
22 | const floatButtonStyles = {
|
23 | opacity: 0.8, |
24 | position: 'fixed', |
25 | width: '70px', |
26 | border: 'none', |
27 | height: '35px', |
28 | bottom: '40px', |
29 | zIndex: 100000, |
30 | right: '15px', |
31 | backgroundColor: '#d4ebf2', |
32 | color: '#fff', |
33 | borderRadius: '50px', |
34 | textAlign: 'center', |
35 | cursor: 'pointer' |
36 | } |
37 | |
38 | const buttonDefaultOpacity = {
|
39 | opacity: 1 |
40 | } |
41 | |
42 | const listItemStyles = {
|
43 | fontFamily: 'Arial', |
44 | fontSize: '13px', |
45 | paddingTop: '5px', |
46 | paddingBottom: '5px', |
47 | paddingLeft: '15px', |
48 | paddingRight: '15px' |
49 | } |
50 | |
51 | const clearBtnStyles = {
|
52 | cursor: 'pointer', |
53 | float: 'right', |
54 | paddingRight: '10px', |
55 | paddingTop: '3px', |
56 | opacity: 0.5, |
57 | fontSize: '15px', |
58 | backgroundColor: 'transparent', |
59 | border: 'none' |
60 | } |
61 | |
62 | const logoTextStyles = {
|
63 | fontFamily: 'Arial', |
64 | fontSize: '16px', |
65 | fontWeight: 'bold', |
66 | paddingLeft: '15px', |
67 | paddingTop: '3px', |
68 | fontStyle: 'italic', |
69 | color: '#525EF9' |
70 | } |
71 | |
72 | const notificationBadgeStyles = {
|
73 | position: 'absolute', |
74 | display: 'none', |
75 | top: '-3px', |
76 | right: '6px', |
77 | width: '12px', |
78 | height: '12px', |
79 | borderRadius: '50%', |
80 | backgroundColor: 'red' |
81 | } |
82 | |
83 | let outfrontLogUl = document.createElement('UL') // Memory leak alert
|
84 | const notificationBadge = document.createElement('SPAN') // Memory leak alert
|
85 | |
86 | const createButtonAndContainer = () => {
|
87 | try {
|
88 | // Create container start |
89 | const container = document.createElement('DIV')
|
90 | container.id = 'outfront-container' |
91 | for (let property in containerStyles) {
|
92 | container.style[property] = containerStyles[property] |
93 | } |
94 | // Create container end |
95 | |
96 | // Create clear console button start |
97 | const clearBtn = document.createElement('BUTTON') // button
|
98 | clearBtn.id = 'outfront-clear-btn' |
99 | clearBtn.innerText = String.fromCharCode(55357, 56350) // bug symbol |
100 | for (let property in clearBtnStyles) {
|
101 | clearBtn.style[property] = clearBtnStyles[property] |
102 | } |
103 | clearBtn.addEventListener('click', () => (outfrontLogUl.innerHTML = ''))
|
104 | container.appendChild(clearBtn) |
105 | // Create clear console button end |
106 | |
107 | //Create logo text start |
108 | let logo = document.createElement('DIV')
|
109 | logo.id = 'outfront-container' |
110 | logo.innerText = ' |
Began life as a copy of #2000598
Snippet is not live.
Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx
No comments. add comment
| Snippet ID: | #2000599 |
| Snippet name: | outfront.js - show js console on mobile browser [fixed] |
| Eternal ID of this version: | #2000599/1 |
| Text MD5: | f89ae3742f88fcb4203e88f6ab251786 |
| Author: | stefan |
| Category: | js |
| Type: | New Tinybrain snippet |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-08-26 16:58:39 |
| Source code size: | 2704 bytes / 110 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 134 / 55 |
| Referenced in: | [show references] |