Wikipedia:User scripts/Guide: Difference between revisions
Content deleted Content added
→CSS files: Reworking this section. More explanation, more examples. |
→Debugging: Adding more explanation and an example of another way to load a test css file. |
||
Line 231:
== Debugging ==
=== Previewing
You can edit your script directly on your [[Special:MyPage/monobook.js|
▲=== Saving in Monobook.js ===
If required elements are missing on the preview page (for example, your script does something on history pages), you will have to save the script in order to test it.
However it's not
=== Load from a localhost web server ===
The best and most recommended way is to
<source lang="javascript">
Line 249 ⟶ 250:
Then run any [[web server]] on your computer and create the <tt>wikipediatest.js</tt> file in the appropriate folder. The code inside this file will be executed as if it was inside your <tt>/monobook.js</tt>.
You can edit your <tt>wikipediatest.js</tt> file with any text editor, perhaps with syntax highlighting and other convenient features, then save the file and simply reload any Wikipedia page to see the results. (You don't need to wait and if your web server is nice or you set it right you don't even need to [[Wikipedia:Bypass your cache|bypass your browser cache]].)
For example you could use [http://www.ritlabs.com/en/products/tinyweb/ TinyWeb] which is less than 100kbyte on disk and doesn't require installation. Save and unzip <tt>tinyweb.zip</tt> for example into <tt>c:\Program Files\Tinyweb</tt>, then create a shortcut to <tt>tiny.exe</tt>, in shortcut properties add an argument — path to your folder with <tt>wikipediatest.js</tt> and any file <tt>index.html</tt> (required). Start TinyWeb with this shortcut; unload it with Task Manager.
Line 262 ⟶ 263:
</source>
'''Note!''' Such <code>@import</code> statements must come before any other declarations in your <tt>/monobook.css</tt>. But there can be <code>/* comments */</code> above them.
An alternative way is to put this line anywhere in your <tt>/monobook.js</tt> instead:
<source lang="javascript">
importStylesheetURI( 'http://localhost:8080/wikipediatest.css' );
</source>
Once you have finished the CSS code you either need to paste it into your <tt>/monobook.css</tt> if it is only for personal use. Or if it is for use by others then you should upload it to for instance [[Special:Mypage/yourscript.css|User:Yourname/yourscript.css]]. Then other users can import it by putting this line in their <tt>/monobook.js</tt>. Note, that is in their ".js", not their ".css".
Line 299 ⟶ 306:
However a full-blown Javascript debugger is much more convinient.
-->
== Software ==
|