hashirama/goldendict-ng
hashirama/goldendict-ng
0
0
Fork 0
mirror of https://github.com/xiaoyifang/goldendict-ng.git synced 2024-11-27 15:24:05 +00:00
Code Issues Actions 1 Projects Releases Wiki Activity

Update how to debug dictionary js.md

Browse source
This commit is contained in:
xiaoyifang 2023-08-30 16:19:24 +08:00 committed by GitHub
parent 3fbeff1ffa
commit a801c4cb09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
website/docs/howto/how to debug dictionary js.md
View file

@ -1,27 +1,29 @@
# background
# How to debug dictionary javascript
## background
When some js functions do not work as expected, this article tries to give a debug solution to pinpoint the problem.
# goldendict-ng inspector
## goldendict-ng inspector
Goldendict-ng has embedded an inspector, you can trigger it manually using `F12`.
Screenshot:
![Inspector](../img/inspector.png)
# How to navigate to the specified element
## How to navigate to the specified element
Click the find element and move mouse to the specified element, click the element will navigate the source panel to the very place.
![steps](../img/inspector-steps.png)
# Modify the css style
## Modify the css style
you can play around with the css to modify the appearance of the html and check the results.
![style](../img/inspector-style.png)
# check javascript events
## check javascript events
- navigate to the specified element
- check eventlisterner panel
@ -36,7 +38,7 @@ If some desired event does not triggered , it can first check does the event lis
![breakpoint](../img/inspector-breakpoint.png)
# reproduce the issue in the goldendit
## reproduce the issue in the goldendit
following your normal operations and debugging the javascript code and pay attention to the console output. Whether any errors happened.
![Alt text](../img/inspector-console.png)
![Alt text](../img/inspector-console.png)